當前位置：首頁 > 前端技术 > vue >内容正文

vue

022_Vue购物车

發布時間：2025/5/22 vue 58 豆豆

生活随笔收集整理的這篇文章主要介紹了 022_Vue购物车小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 項目目錄

2. img目錄

3. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>購物車</title><style type="text/css">.container {}.container .cart {width: 300px;margin: auto;}.container .title {background-color: #1E9FFF;height: 40px;line-height: 40px;text-align: center;/*color: #fff;*/ }.container .total {background-color: #FFB800;height: 50px;line-height: 50px;text-align: right;}.container .total button {background-color: #FF5722;height: 50px;width: 150px;border: 0;}.container .total span {color: red;font-weight: bold;margin-right: 10px;}.container .item {height: 55px;line-height: 55px;position: relative;border-top: 1px solid #ADD8E6;}.container .item img {width: 45px;height: 45px;margin: 5px;}.container .item .name {position: absolute;width: 90px;top: 0;left: 55px;font-size: 16px;}.container .item .change {width: 100px;position: absolute;top: 0;right: 50px;}.container .item .change a {font-size: 20px;width: 30px;text-decoration:none;background-color: lightgray;vertical-align: middle;}.container .item .change .num {width: 40px;height: 25px;}.container .item .del {position: absolute;top: 0;right: 0px;width: 40px;text-align: center;font-size: 40px;cursor: pointer;color: red;}.container .item .del:hover {background-color: orange;}</style></head><body><div id="app"><div class="container"><my-cart></my-cart></div></div><script type="text/javascript" src="vue.min.js"></script><script type="text/javascript">var cartTitle = {props: ['uname'],template: `<div class="title">{{uname}}商品</div>`}var cartList = {props: ['list'],template: `<div><div class="item" :key='item.id' v-for='item in list'><img :src="item.img" /><div class="name">{{item.name}}</div><div class="change"><a href="" @click.prevent='sub(item.id)'>－</a><input type="text" class="num" :value='item.num' @blur='changeNum(item.id, $event)' /><a href="" @click.prevent='add(item.id)'>＋</a></div><div class="del" @click='del(item.id)'>×</div></div></div>`,methods: {changeNum: function(id, event){this.$emit('change-num', {id: id,type: 'change',num: event.target.value});},sub: function(id){this.$emit('change-num', {id: id,type: 'sub'});},add: function(id){this.$emit('change-num', {id: id,type: 'add'});},del: function(id){// 把id傳遞給父組件this.$emit('cart-del', id);}}}var cartTotal = {props: ['list'],template: `<div class="total"><span>總價: {{total}}</span><button>去支付</button></div>`,computed: {total: function() {// 計算商品的總價var t = 0;this.list.forEach(item => {t += item.price * item.num;});return t;}} }Vue.component('my-cart',{data: function() {return {uname: '張三',list: [{id: 1,name: '華為手機',price: 3999,num: 1,img: 'img/1.jpg'},{id: 2,name: 'OPPO手機',price: 799,num: 1,img: 'img/2.jpg'},{id: 3,name: '小米手機',price: 2199,num: 1,img: 'img/3.jpg'},{id: 4,name: '聯想電腦',price: 8999,num: 1,img: 'img/4.jpg'},{id: 5,name: '華為平板',price: 2389,num: 2,img: 'img/5.jpg'}]}},template: `<div class='cart'><cart-title :uname='uname'></cart-title><cart-list :list='list' @change-num='changeNum($event)' @cart-del='delCart($event)'></cart-list><cart-total :list='list'></cart-total></div>`,components: {'cart-title': cartTitle,'cart-list': cartList,'cart-total': cartTotal},methods: {changeNum: function(val) {// 分為三種情況：輸入域變更、加號變更、減號變更if(val.type=='change') {// 根據子組件傳遞過來的數據, 跟新list中對應的數據this.list.some(item=>{if(item.id == val.id) {item.num = val.num;// 終止遍歷return true;}});}else if(val.type=='sub'){// 減一操作this.list.some(item=>{if(item.id == val.id) {if(item.num < 1) return false;item.num -= 1;// 終止遍歷return true;}});}else if(val.type=='add'){// 加一操作this.list.some(item=>{if(item.id == val.id) {item.num += 1;// 終止遍歷return true;}});}},delCart: function(id) {// 根據id刪除list中對應的數據// 1.找到id所對應數據的索引var index = this.list.findIndex(item=>{return item.id == id;});// 2.根據索引刪除對應數據this.list.splice(index, 1);}}});var vm = new Vue({el: "#app"});</script></body> </html>

4. 效果圖

總結

以上是生活随笔為你收集整理的022_Vue购物车的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。