时间:2021-05-26
本文实例讲述了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程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了vue.js实现简单购物车的具体代码,供大家参考,具体内容如下这次我将给大家带来一个vue.js实现购物车的小项目,如有不足请严厉指出。购物
前言以往的购物车,基本都是通过大量的DOM操作来实现。微信小程序其实跟vue.js的用法非常像,接下来就看看小程序可以怎样实现购物车功能。需求先来弄清楚购物车的
本文实例讲述了vue实现的仿淘宝购物车功能。分享给大家供大家参考,具体如下:下面是一张众所周知的淘宝购物车页面,今天要讲解的案例就是用vue.js做一个类似的页
开始更新前端框架Vue.JS的相关博客。功能概述学习了Vue.JS的一些基础知识,现在利用指令、数据绑定这些基础知识开发一个简单的购物车功能。功能要点如下:(1
本文实例讲述了Vue.js实现开发购物车功能的方法。分享给大家供大家参考,具体如下:购物车一般包含商品名称、单价、数量等信息,数量可以任意新增或减少,商品项也可