實現全選單選，在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