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的封装

 

1.  
   data() {
2.  
   return {
3.  
   //全选
4.  
   allChecked:false,
5.  
   //总计一栏是否显示的标记
6.  
   displayMoney: false,
7.  
   // 购物清单
8.  
   list: [{
9.  
   checked:false,
10.  
    id: 1,
11.  
    name: '发动机',
12.  
    price: 180,
13.  
    count: 1,
14.  
    Stotal: 180
15.  
    },
16.  
    {
17.  
    checked:false,
18.  
    id: 2,
19.  
    name: '燃油机',
20.  
    price: 200,
21.  
    count: 1,
22.  
    Stotal: 200
23.  
    },
24.  
    {
25.  
    checked:false,
26.  
    id: 3,
27.  
    name: '滤清',
28.  
    price: 500,
29.  
    count: 1,
30.  
    Stotal: 500
31.  
    }
32.  
    ]
33.  
    }
34.  
     
35.  
    },

 

2、html部分

1.  
   <div id="" v-if="list.length">
2.  
   <table class="table_border">
3.  
   <thead>
4.  
   <tr class="tip">
5.  
   <th>全选<input type="checkbox" @click="handleChecked()" v-model="allChecked"/></th>
6.  
   <th>商品编号</th>
7.  
   <th>商品名称</th>
8.  
   <th>商品单价</th>
9.  
   <th>购买数量</th>
10.  
    <th>小计</th>
11.  
    <th>操作</th>
12.  
    </tr>
13.  
    </thead>
14.  
    <tbody>
15.  
    <tr v-for="(item,index) in list">
16.  
    <td><input type="checkbox" v-model="item.checked" name="all"/></td>
17.  
    <td>{{ index + 1}}</td>
18.  
    <td>{{ item.name }}</td>
19.  
    <td>￥{{ item.price }}</td>
20.  
    <td>
21.  
    <button @click="handleReduce(index)" :disabled="item.count===1">-</button>
22.  
    <input type="text" v-model="item.count" readonly="readonly" />
23.  
    <button @click="handleAdd(index)">+</button>
24.  
    </td>
25.  
    <td>￥{{ item.Stotal }}</td>
26.  
    <td>
27.  
    <el-button @click="handleRemove(index)" type="danger" icon="el-icon-delete" circle></el-button>
28.  
    </td>
29.  
    </tr>
30.  
    <tr>
31.  
    <td colspan="4"></td>
32.  
    <td colspan="3">
33.  
    总价 ：￥
34.  
    <span v-if="displayMoney=true">{{totalPrice}}</span>
35.  
    <span v-else="displayMoney=false">0</span>
36.  
    </td>
37.  
    </tr>
38.  
    </tbody>
39.  
    </table>
40.  
    </div>
41.  
    <div id="" v-else>
42.  
    购物车为空
43.  
    </div>

 

3、核心方法部分

1.  
   handleChecked: function(item) {
2.  
   //全选
3.  
   if(this.allChecked==false) {
4.  
   for(var i = 0; i < this.list.length; i++) {
5.  
   var item = this.list[i];
6.  
   item.checked = true;
7.  
   }
8.  
   } else { //取消全选
9.  
   for(var i = 0; i < this.list.length; i++) {
10.  
    var item = this.list[i];
11.  
    item.checked = false;
12.  
    }
13.  
    }
14.  
    this.allChecked = !this.allChecked;
15.  
    }

 

 

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