Vue.js实现的购物车功能详解
(编辑:jimmy 日期: 2024/11/5 浏览:3 次 )
本文实例讲述了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("color: #0000ff">https://github.com/GitHubVikas/Yao/tree/master/DemoOne希望本文所述对大家vue.js程序设计有所帮助。
下一篇:JS温故而知新之变量提升和时间死区