Vue实现购物车全选及价格计算 |
您所在的位置：网站首页 › vue使用计算属性实现购物车页面还有满减 › Vue实现购物车全选及价格计算 |
|
《vuejs实战》这本书中5.5是一道实战题：利用计算属性、指令等知识开发购物车。 练习1：在当前示例基础上扩展商品列表，新增一项是否选中该商品的功能，总价变为只计算选中商品的总价，同时提供一个全选的按钮。 练习2：将商品列表list改为一个二维数组来实现商品的分类，比如可分为“电子产品” “生活用品” 和“果蔬”，同类商品聚合在一起。提示，你可能会用到两次v-for。 1、购物车 Document [v-cloak] { display: none; } table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; empty-cells: show; padding: 10px; } th, td{ border: 1px solid #e9e9e9; text-align: left; padding: 10px; } th{ background: #f7f7f7; color: #5c6b77; font-weight: 600; white-space: nowrap; padding: 10px; } 全选 编号 商品名称 商品单价 购买数量 操作 {{ index + 1}} {{ item.name }} {{ item.price }} - {{ item.count }} + 移除 总价：￥{{ totalPrice }} 购物车为空 var app = new Vue({ el: '#app', data: { list: [ { id: 1, name: '《我喜欢你，像风走了八千里》', price: 24, count: 1, checked: false }, { id: 2, name: '《余生很长，别慌张，别失望》', price: 25.2, count:1, checked: false }, { id:3, name:'《不堪孤独，就无法脱离庸俗》', price: 23.8, count:1, checked: false } ], checkBoxModel: [], checked: false }, computed: { totalPrice: function () { var total = 0; for (var i = 0; i < this.list.length; i++) { if (this.list[i].checked) { var item = this.list[i]; total += item.price * item.count; } } return total.toFixed(2); } }, methods: { handleReduce: function (index) { if (this.list[index].count === 1) return; this.list[index].count--; }, handleAdd: function (index) { this.list[index].count++; }, handleRemove: function (index) { this.list.splice(index, 1); }, //全选的实现通过checkBoxModel的状态 checkedAll: function () { var _this = this; if (_this.checked) { _this.checkBoxModel = []; _this.checked = false; } else { _this.checkBoxModel = []; _this.list.forEach(function (item) { _this.checkBoxModel.push(item.id); }); _this.checked = true; } }, //单选的实现依靠的是checked通过click的切换实现 onlyChecked: function (index) { if (this.list[index].checked) { this.list[index].checked = false; } else { this.list[index].checked = true; } }, // 从遍历单个，若全部选中则全选按钮选中 checkPick: function () { me = this; var checkedSum = 0; for (var i = 0; i < me.list.length; i++) { if (me.list[i].checked) { checkedSum++; } } if (checkedSum == me.list.length) { me.checked = true; } else { me.checked = false; } }, //计算价格 checkModel: function () { me = this; if (me.checkBoxModel.length) { newArr = me.checkBoxModel.concat(); // console.log(newArr); // console.log(me.checkBoxModel); for (var i = 0; i < me.checkBoxModel.length; i++) { newone = newArr.shift().toString(); console.log(newone); me.list[newone - 1].checked = true; } } else { newArr = me.checkBoxModel.concat(); // console.log(newArr); for (var i = 0; i < me.list.length; i++) { me.list[i].checked = false; } } // 利用checkBoxModel的绑定的状态来分别给每个物品确认checked的状态，避免与onlyChecked的冲突 } } });2、二维数组 Document [v-cloak] { display: none; } table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; empty-cells: show; } th, td{ border: 1px solid #e9e9e9; text-align: left; padding: 5px; } th{ background: #f7f7f7; color: #5c6b77; font-weight: 600; white-space: nowrap; padding: 5px; } 全选 类型 商品名称 编号 商品单价 购买数量 操作 {{ num(index) }} {{ initem.id }} {{ initem.name }} {{ initem.price }} - {{ initem.count }} + 移除 总价：￥{{ totalPrice }} 购物车为空 var app = new Vue({ el: '#app', data: { list: [ [{ id: 1, name: 'iphone 7', price: '6188', count: 1, isBuy: false, cls: 'Eletronic Products' }, { id: 2, name: 'ipad Pro', price: '5888', count: 1, isBuy: false }, { id: 3, name: 'macbook pro', price: '21488', count: 1, isBuy: false }], [{ id: 4, name: 'T-shirt', price: '150', count: 1, isBuy: false, cls: '生活用品' }, { id: 5, name: 'cup', price: '10', count: 2, isBuy: false }, { id: 6, name: 'dish', price: '30', count: 1, isBuy: false }], [{ id: 7, name: 'apple', price: '3', count: 5, isBuy: false, cls: '农产品' }, { id: 8, name: 'watermelon', price: '15', count: 1, isBuy: false }, { id: 9, name: 'cabbage', price: '5', count: 1, isBuy: false }] ], checkBoxModel: [], checked: false }, computed: { totalPrice: function () { var total = 0; for (var i = 0; i < this.list.length; i++) { for (var j = 0; j < this.list[i].length; j++) { var itemp = this.list[i][j]; if (itemp.isBuy) { total += itemp.price * itemp.count; } } } return total.toString().replace(/\B(?=(\d{3})+$)/g, ','); } }, methods: { handleReduce: function (index, inindex) { if (this.list[index][inindex].count === 1) return; this.list[index][inindex].count--; }, handleAdd: function (index, inindex) { this.list[index][inindex].count++; }, handleRemove: function (index, inindex) { this.list[index].splice(inindex, 1); }, allPick: function () { var _this = this; if (_this.checked) { _this.checkBoxModel = []; _this.checked = false; } else { _this.checkBoxModel = []; for (var i = 0; i < _this.list.length; i++) { _this.list[i].forEach(function (item) { _this.checkBoxModel.push(item.id); }); } _this.checked = true; } }, pickOne: function (index, inindex) { if (this.list[index][inindex].isBuy) { this.list[index][inindex].isBuy = false; } else { this.list[index][inindex].isBuy = true; } }, checkPick: function () { _this = this; var sumPic = 0; var alength = 0; for (var i = 0; i < _this.list.length; i++) { for (var j = 0; j < _this.list[i].length; j++) { if (_this.list[i][j].isBuy) { sumPic++; } } alength += _this.list[i].length } if (sumPic == alength) { _this.checked = true; console.log('all pick'); } else { _this.checked = false; } }, num: function (index) { for (var j = 0; j < this.list.length; j++) { if (index === j) { return this.list[j][0].cls; } } }, checkModel: function () { _this = this; if (_this.checkBoxModel.length) { newArr = _this.checkBoxModel.concat(); //console.log(newone); for (var i = 0; i < _this.list.length; i++) { for (var j = 0; j < _this.list[i].length; j++) { var newone = newArr.shift(); if (_this.list[i][j].id === newone) { _this.list[i][j].isBuy = true; } } } } else { for (var i = 0; i < _this.list.length; i++) { for (var j = 0; j < _this.list[i].length; j++) { _this.list[i][j].isBuy = false; } } } } }, created() { _this = this; _this.checkModel(); console.log(_this.list[1][2].name); } });
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |