Vue.js实现的购物车功能详解
2019-03-28 11:00
921 查看
本文实例讲述了Vue.js实现的购物车功能。分享给大家供大家参考,具体如下:
使用计算属性,内置指令,方法等基础知识开发购物车。
需求分析:展示一个已经加入购物车的商品列表,包含商品名称、商品单价、购买数量和操作,以及最后确定是否选中商品的功能,总价格为选中商品的价格,够买数量可以增加减少,商品可以从购物车中移除。效果如图所示:
――实例来自《Vue.js实战》第五章
逻辑整理:vue实例定义一个数组list存放商品信息,定义方法与减少按钮,增加按钮等联系,动态改变商品数量,通过handleRemove()
移除list中的值;利用each()
遍历所有type='checkbox'
的input,修改它们的状态,最后用totalPrices()
计算商品总价格。
index.html
<div id="app"> <template v-if="list.length"> <table> <thead> <tr> <th></th> <th>商品名称</th> <th>商品单价</th> <th>购买数量</th> <th>操作</th> <th><input type="checkbox" name="list" @click="checkBox()" id="checkBox"></th> </tr> </thead> <tbody> <tr v-for="(item, index) in list"> <td>{{ index + 1 }}</td> <td>{{ item.name }}</td> <td>{{ item.price }}</td> <td> <button @click="handleReduce(index)" :disabled="item.count === 1" class="btn"> - </button> {{ item.count }} <button @click="handleAdd(index)" class="btn"> + </button> </td> <td> <button @click="handleRemove(index)" class="btns">移除</button> </td> <td style="text-align: center;"> <input type="checkbox" name="list" @click="totalPrices()"> </td> </tr> </tbody> </table> <div id="price">总价:¥{{totalPrice}}</div> </template> <div v-else>购物车为空</div> </div>
style.css
*{ margin: 0px; padding: 0px; } [v-cloak] { display: none; } #app{ width: 200px; height: 200px; margin: 10px auto; text-align: center; } #price{ width: 457px; height: 40px; border: 1px solid #e9e9e9; border-top: 0; line-height: 40px; } table{ border: 1px solid #e9e9e9; border-collapse: collapse; border-spacing: 0; empty-cells: show; } th,td{ padding: 8px 16px; border:1px solid #e9e9e9e9; text-align: left; } th{ background: #f7f7f7; color: #5c6c77; font-weight: 600; white-space: nowrap; } .btn{ width: 20px; height: 20px; border-radius: 50%; border:1px solid #cccccc; background: #ffffff; color: #778899; } .btns{ width: 40px; height: 20px; border-radius: 5px; border:1px solid #cccccc; background: #ffffff; color: #778899; line-height: 20px; }
app.js
var app=new Vue({ el:'#app', data:{ list: [ { id:1, name:'iPhone 7', price:6188, count:1 }, { id:2, name:'iPad Pro', price:5888, count:1 }, { id:3, name:'MaxBook Pro', price:21488, count:1 } ], totalPrice: 0 }, methods:{ handleReduce: function (index) {//减少按钮 if(this.list[index].count === 1){ return; } this.list[index].count--; this.$options.methods.totalPrices(); }, handleAdd: function (index) {//增加按钮 this.list[index].count++; this.$options.methods.totalPrices(); }, handleRemove: function (index) {//移除按钮 this.list.splice(index, 1); $("tr").eq(index+1).remove("input[type='checkbox']"); this.$options.methods.totalPrices(); }, checkBox: function (){//选中状态 if($("#checkBox").is(':checked')==true){ $("input[type='checkbox']").each(function(){ $("input[type='checkbox']").attr("checked",true); }); }else{ $("input[type='checkbox']").each(function(){ $("input[type='checkbox']").attr("checked",false); }); } this.$options.methods.totalPrices(); }, totalPrices: function (){//计算总价格 var total = 0; for(var i = 0;i < app.list.length;i++){ var item = app.list[i]; if($("input[type='checkbox']").eq(i+1).is(':checked')){ total += item.price * item.count; } } app.totalPrice = total.toString().replace(/\B(?=(\d{3})+$)/g,','); } } });
GitHub地址:https://github.com/GitHubVikas/Yao/tree/master/DemoOne
希望本文所述对大家vue.js程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- Vue.js实现开发购物车功能的方法详解
- vue实现的仿淘宝购物车功能详解
- bootstrap+vue.js实现简单的购物车功能
- vue.js实现简单的购物车功能
- 用vue.js实现购物车功能
- 简单3步 js使用cookie实现的购物车功能[原创]
- Vue.js实现文章评论和回复评论功能
- 原生js实现的局部页面打印功能,可以适用vue和jq
- Vue.js实践:实现多条件筛选、搜索、排序及分页的表格功能
- 利用Vue.js实现求职在线之职位查询功能
- vue.js 实现图片本地预览 裁剪 压缩 上传功能
- vue实现商城购物车功能
- Vue.js双向绑定实现原理详解
- vue2.0使用Sortable.js实现的拖拽功能
- JS实现添加至购物车功能
- vue实现购物车功能
- 详解通过源码解析Node.js中cluster模块的主要功能实现
- vue.js 实现输入框动态添加功能
- 使用Vue.js实现表格的排序和搜索功能
- 使用vue.js实现checkbox的全选和多个的删除功能