022_Vue购物车
生活随笔
收集整理的这篇文章主要介绍了
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购物车的全部内容，希望文章能够帮你解决所遇到的问题。
