团购微信小程序开发_Vue完成购物车的全选、单选、显示商品价格

Vue实现购物车的全选、单选、显示商品价格代码实例       这篇文章主要介绍了Vue实现购物车的全选、单选、显示商品价格实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

今天中午废了一会时间,总算把项目中的购物车的单选、全选、以及实现数据的动态显示做出来了,给小白分享一下我个人一个解决办法:

购物车的基本页面如下:

先说实现的总体思路

1.给table表中表头th加一个 checkbox,设这两个事件:@click=”checkAll” v-model=”checkall”; 2.给对应的tr加一个 checkbox 绑定一个事件 v-model=”checked”,checked设为数组,专门放商品Id; 3.由于checkall默认为false,当我勾选全选框时,将checkall设为true,往checked数组中遍历添加所有商品ID,每列中的checkbox自动选中,此时已经实现全选的取消\选中了,当单选时,应该将checkAll的状态设为false,这样就能实现单选多选了; 4.最后一步就是对数据的动态显示了,data中绑定两个值,分别是price和count,当我勾选某一列时,=”xx(price,count,productId)”传值放到页面上; 5.单选的选中与取消可以通过判断商品id是否存在在数组中,即indexOf(productId)==-1,如果数组中是存在此商品ID,则点击单选框时应减少价格,反之增加。

这是我个人的思路,具体代码实现如下:

html:

 div id="a" 
 table v-if="list.length" 
 thead 
 th input type="checkbox" id="box" @click="checkAll" v-model="checkall" / /th 
 th 图片 /th 
 th 商品名 /th 
 th 数量 /th 
 th 单价 /th 
 th 总金额 /th 
 th 加入时间 /th 
 th 删除 /th 
 /tr 
 /thead 
 tbody 
 tr v-for="(dateil,index) in list" :key="index" 
 td input type="checkbox" v-model="checked" @click="select(dateil.detailId,dateil.detailProductprice,dateil.detailProductnum)" :value="dateil.detailId" / /td 
 td a @click="goShop(dateil.detailProductId)" img v-bind:src="web_server_static+dateil.product.productPhoto" /a /td 
 td a @click="goShop(dateil.detailProductId)" {{dateil.product.productName}} /a /td 
 td {{dateil.detailProductnum}} /td 
 td {{dateil.detailProductprice}} /td 
 td {{dateil.detailProductprice*dateil.detailProductnum}} /td 
 td {{dateil.detailDatetime}} /td 
 button type="button" id="but" @click="del(dateil.detailId)" 删除 /button 
 /td 
 /tr 
 /tbody 
 /table 
 div v-else 购物车空空如也,请先去购买商品~ /div 
 div id="label_btn" 
 span label 已选商品 a {{count}} /a 件,共 /a ¥{{price}} /a 元 数组{{checked}} /label 
 /span 
 span button type="button" id="btn-close" @click="jiesuan()" 结算 /button /span 
 /div 
 !--结算按钮-- 
 /div 

Vue中的数据应该这样写

var vue = new Vue({
 el: '#a',
 data: {
 list: [],
 checkall: false,
 checked: [],
 price:0,
 count:0,

js:

checkAll: function() {
 *控制全选反选
 var _this = this
 //true的时候是全选,false是不选
 if(this.checkall) {
 // 实现反选,按钮选中时 实现了反选,列表为空
 this.checked = []
 this.price=0;
 this.count=0;
 } else {
 // 实现全选
 this.price=0;
 this.count=0;
 this.checked = []
 this.list.forEach(function(dateil) {
 _this.price+=parseInt(dateil.detailProductprice);
 _this.count+=parseInt(dateil.detailProductnum);
 _this.checked.push(dateil.detailId)
 if(this.checked.length === this.list.length) {
 this.checkall = true
 // console.log(this.checkall)
 // console.log(this.checked)

this.list.forEach(function(dateil) { _this.price+=parseInt(dateil.detailProductprice); _this.count+=parseInt(dateil.detailProductnum); _this.checked.push(dateil.detailId) if(this.checked.length === this.list.length) { this.checkall = true // console.log(this.checkall) // console.log(this.checked)

这样一个购物车的全选、单选、与数据的显示就完成了。

以上所述是小编给大家介绍的Vue实现购物车的全选、单选、显示商品价格详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!


相关阅读