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