Vue实现购物车的全选、单选、显⽰商品价格代码实例
今天中午废了⼀会时间，总算把项⽬中的购物车的单选、全选、以及实现数据的动态显⽰做出来了，给⼩⽩分享⼀下我个⼈⼀个解决办法：
购物车的基本页⾯如下：
先说实现的总体思路
1. 1.给table表中表头th加⼀个 checkbox，设这两个事件：@click=”checkAll” v-model=”checkall”；
2. 2.给对应的tr加⼀个 checkbox 绑定⼀个事件 v-model=”checked”，checked设为数组，专门放商品Id；
3. 3.由于checkall默认为false，当我勾选全选框时，将checkall设为true，往checked数组中遍历添加所有商品ID，每列中的checkbox⾃动选中，此时已经实
现全选的取消\选中了，当单选时，应该将checkAll的状态设为false，这样就能实现单选多选了；
4. 4.最后⼀步就是对数据的动态显⽰了，data中绑定两个值，分别是price和count，当我勾选某⼀列时，通过@click=”xx(price,count,productId)”传值放到
页⾯上；
5. 5.单选的选中与取消可以通过判断商品id是否存在在数组中，即indexOf(productId)==-1，如果数组中是存在此商品ID，则点击单选框时应减少价格，
反之增加。
这是我个⼈的思路，具体代码实现如下：
html：
<div id="a" class="container">
<table class="table table-hover" v-if="list.length">
<thead>
<tr>
<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" class="checkbox" v-model="checked"  @click="select(dateil.detailId,dat
eil.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>
<td>
<button type="button" id="but" @click="del(dateil.detailId)" class="btn btn-danger">删除</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()" class="btn btn-danger">结算</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;
} else {
// 实现全选
this.price=0;
this.checked = []
this.list.forEach(function(dateil) {
_this.price+=parseInt(dateil.detailProductprice);
_unt+=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)
}
}
/**
* 当单选框选中时
*/
checkAll: function() {
var _this = this
//true的时候是全选，false是不选
if(this.checkall) {
// 实现反选，按钮选中时实现了反选，列表为空
this.checked = []
this.price=0;
} else {
// 实现全选
this.price=0;
this.checked = []
this.list.forEach(function(dateil) {
_this.price+=parseInt(dateil.detailProductprice);
_unt+=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实现购物车的全选、单选、显⽰商品价格详解整合，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。