Vue实现购物车全选及价格计算
2024-06-04 09:58:18
《vuejs实战》这本书中5.5是一道实战题：利用计算属性、指令等知识开发购物车。
练习1：在当前示例基础上扩展商品列表，新增一项是否选中该商品的功能，总价变为只计算选中商品的总价，同时提供一个全选的按钮。
练习2：将商品列表list改为一个二维数组来实现商品的分类，比如可分为“电子产品” “生活用品” 和“果蔬”，同类商品聚合在一起。提示，你可能会用到两次v-for。
1、购物车
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>[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;}</style>
</head>
<body><div id="app" v-cloak><template v-if="list.length"><table><thead><tr><th><span>全选</span><input type="checkbox" @click="checkedAll(),checkModel()" v-model="checked"></th><th>编号</th><th>商品名称</th><th>商品单价</th><th>购买数量</th><th>操作</th></tr></thead><tbody><tr v-for="(item, index) in list"><td><input type="checkbox" :value="item.id" v-model="checkBoxModel" @click.stop="onlyChecked(index),checkPick()"> </td><td>{{ index + 1}}</td><td>{{ item.name }}</td><td>{{ item.price }}</td><td><button @click="handleReduce(index)" :disable="item.count === 1">-</button>{{ item.count }}<button @click="handleAdd(index)">+</button></td><td><button @click="handleRemove(index)">移除</button></td></tr></tbody></table><div style="margin-top: 20px;">总价：￥{{ totalPrice }}</div></template><div v-else>购物车为空</div></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>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的冲突}}});</script>
</body>
</html>2、二维数组
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>[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;}</style>
</head>
<body><div id="app" v-cloak><template v-if="list.length"><table><thead><tr><th><span>全选</span><input type="checkbox" @click="allPick(),checkModel()" v-model="checked"></th><th>类型</th><th>商品名称</th><th>编号</th><th>商品单价</th><th>购买数量</th><th>操作</th></tr></thead><tbody><template v-for="(item1, index) in list"><tr><tr v-for="(initem, inindex) in item1"> <td><input type="checkbox" :value="initem.id" v-model="checkBoxModel" @click.stop="pickOne(index, inindex),checkPick()"></td><td>{{ num(index) }}</td><td>{{ initem.id }}</td><td>{{ initem.name }}</td><td>{{ initem.price }}</td><td><button @click="handleReduce(index, inindex)" :disable="initem.count === 1">-</button>{{ initem.count }}<button @click="handleAdd(index, inindex)">+</button></td><td><button @click="handleRemove(index, inindex)">移除</button></td></tr></tr></template></tbody></table><div>总价：￥{{ totalPrice }}</div></template><div v-else>购物车为空</div></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>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);}});</script>
</body>
</html>Vue实现购物车全选及价格计算相关推荐
- vue实现购物车全选，总计等功能
一.单价商品的小计 整个操作过程是,商品的数量是可以控制的,可增可减,最少为1.并且在数量的变化中,商品的小计也在变化. 二.单选选中商品 在购物车中,需要选择当前想买的商品,这一功能成为商品的单选, ...
- vue中实现商品购物车全选反选
项目需求: 实现一个购物车 全选框实现对商家和商品的全选 商家全选框实现对当前商家所有商品的全选 取消其中一个商品则取消对应商家全选和全选框 选中一个商家下的所有商品则勾选对应商家的全选框,不勾选全选 ...
- 如何用Vue实现一个全选指令
最近用vue做了两个项目,都需要实现全选反选的功能,两个项目用了两种实现方法,第一个项目用vue的computed,第二个项目用指令来实现,用起来,发觉指令更加方便. 第一次做全选的时候是刚开始接触v ...
- JS实现购物车全选、不选、反选的功能（十七）
JS实现购物车全选.不选.反选的功能(十七) 这里没有使用购物车啦,不过原理都是一样的啦 效果: <!DOCTYPE html> <html lang="en"& ...
- vue.js 实现全选，单选，计算商品总价格，商品件数
vue.js 实现全选,单选,计算商品总价格,商品件数 1.标签 <div id="main-body" class="box"> <div ...
- vue3购物车(全选，反选，数量计算)
1.首先,你需要准备一个文件夹,目录内容如下 2.其次,css中创建一个style.css,内容如下 * {margin: 0;padding: 0;box-sizing: border-box; } ...
- vue 多层双层全选_vue2.0 实现全选和全不选
实现思路: 1. v-model 一个收集所有input(除全选框外)数组checkModel ,vue会动态将其checked为true的input的value值存入数组checkModel里 2 ...
- 小程序购物车全选反选 数量加减 总价钱 总数量
//不多说了,只是为了记录每次做的小东西 ,有需要的可以直接复制代码到开发工具查看比较清楚,上代码 <!--pages/map/map.wxml--> <view class='co ...
- jQuery购物车全选总价案例
分析 全选思路:里面3个小的复选框按钮(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走 因为checked是复选框的固有属性,所以利用prop()方法获取和设置该属 ...
最新文章
- 为你的组织设计自己的障碍消除流程
- Linux yum 命令详解 源配置
- Spring|AOP
- C/C++实现快速排序
- 匿名用户访问用发布站点模板创建网站的列表项时要求登录的问题解决
- 数据结构与算法--面试必问AVL树原理及实现
- jquery 乱码 传参_jquery ajax传递中文参数乱码问题及解决方法说明
- php fpm子进程数配置,php-fpm进程管理方式以及子进程数量配置原则详解
- Eclipse Debug调试详解
- python自学课堂_python自学——列表
- FineReport缺失字体检测
- 如何进行monkey测试
- ubuntu设置开机启动程序
- Linux系统下如何创建任意大小的测试文件
- 2020华为软件精英挑战赛总结
- 【Java PTA作业】当老师一口气布置八个作业（ 8 / 8 ）
- VS2008 PRO 、WDK 和DDKWizard搭建Vista驱动开发环境
- 打印机硒鼓寿命到期，导致接传真只显示内存接收而不打印文档
- 疫苗事件发生后，阿里健康工程师连夜开发新功能，一键查询疫苗安全性
- 学计算机也是科学家专业吗,计算机属于工学还是理学?工学和理学有什么区别?计算机有哪些专业...