vue开发购物车，解决全选单选问题 - 好文

实现全选单选，在vue中无法通过this获取input中的checkbox的checked属性，但是可以通过vue对input的特殊方式v-model来实现对应数据的绑定，同样也可以通过这种方式实现购物车全选，单选的效果。

大体内容如下：

主要是通过checkbox以及v-if v-else实现内容的隐藏与显示

当全选对应的checkbox为选中状态，在这里指的是：

<th>全选<input type="checkbox" @click="handleChecked()" v-model="allChecked
"/></th>

注解：

(1)allChecked：被封装成一个boolean类型的值，当选中时被设置成true，反之为对立面。

(2)handleChecked()：是一个函数，用来处理触发事件，同时实现对应的效果，如改变子的checkbox的状态。

(3)一个比较巧妙的转换boolean数据对立面的方法：this.allChecked = !this.allChecked；

(4)购物车总价显示与否的实现方法：通过v-if与v-else来判断，前提也是有一个boolean类型的值作为逻辑控制的标志；

本方法的使用环境如下：

1、data的封装

data() { return { //全选 allChecked:false, //总计一栏是否显示的标记 displayMoney: false, //
购物清单 list: [{ checked:false, id: 1, name: '发动机', price: 180, count: 1, Stotal:
180 }, { checked:false, id: 2, name: '燃油机', price: 200, count: 1, Stotal: 200
}, { checked:false, id: 3, name: '滤清', price: 500, count: 1, Stotal: 500 } ] }
},

2、html部分
<div id="" v-if="list.length"> <table class="table_border"> <thead> <tr
class="tip"><th>全选<input type="checkbox" @click="handleChecked()"
v-model="allChecked"/></th> <th>商品编号</th> <th>商品名称</th> <th>商品单价</th>
<th>购买数量</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody> <tr
v-for="(item,index) in list"> <td><input type="checkbox" v-model="item.checked"
name="all"/></td> <td>{{ index + 1}}</td> <td>{{ item.name }}</td> <td>￥{{
item.price }}</td> <td> <button @click="handleReduce(index)"
:disabled="item.count===1">-</button> <input type="text" v-model="item.count"
readonly="readonly" /> <button @click="handleAdd(index)">+</button> </td>
<td>￥{{ item.Stotal }}</td> <td> <el-button @click="handleRemove(index)"
type="danger" icon="el-icon-delete" circle></el-button> </td> </tr> <tr> <td
colspan="4"></td> <td colspan="3"> 总价：￥ <span
v-if="displayMoney=true">{{totalPrice}}</span> <span
v-else="displayMoney=false">0</span> </td> </tr> </tbody> </table> </div> <div
id="" v-else> 购物车为空 </div>

3、核心方法部分
handleChecked: function(item) { //全选 if(this.allChecked==false) { for(var i =
0; i < this.list.length; i++) { var item = this.list[i]; item.checked = true; }
} else { //取消全选 for(var i = 0; i < this.list.length; i++) { var item =
this.list[i]; item.checked = false; } }this.allChecked = !this.allChecked; }

完整代码见：https://download.csdn.net/download/colourfultiger/10516616

热门工具换一换