現(xiàn)在讓我們來看一下Vue 2的全選操作。在很多web應(yīng)用程序中，我們會遇到需要全選/取消全選的情況，這時候Vue 2可以為我們提供非常便利的解決方案。

首先，在我們的HTML中，我們需要創(chuàng)建一個用于觸發(fā)全選的checkbox和一組需要全選/取消全選的checkbox。說到這里，有一個小技巧需要注意，即使用v-model指令來綁定checkbox的值，并將它們都綁定到同一個數(shù)組上。這樣我們可以在Vue實(shí)例中統(tǒng)一管理這些checkbox。

全選
{{ item.name }}

在Vue實(shí)例中，我們需要定義包括isCheckedAll和checkedFruits這兩個變量，isCheckedAll用于控制全選checkbox的狀態(tài)，checkedFruits用于保存被選中的水果：

var app = new Vue({
el: '#app',
data: {
fruits: [
{ name: '蘋果' },
{ name: '梨子' },
{ name: '香蕉' },
{ name: '草莓' },
{ name: '桃子' }
],
isCheckedAll: false,
checkedFruits: []
}
});

接著，我們需要在Vue實(shí)例中添加一個方法來監(jiān)聽全選checkbox的變化，當(dāng)全選checkbox被選中時，我們需要將所有checkbox設(shè)置為選中狀態(tài)；當(dāng)全選checkbox被取消選中時，我們需要將所有checkbox設(shè)置為非選中狀態(tài)。

methods: {
checkAll() {
if (this.isCheckedAll) {
var self = this;
this.fruits.forEach(function(fruit) {
if (self.checkedFruits.indexOf(fruit.name) === -1) {
self.checkedFruits.push(fruit.name);
}
});
} else {
this.checkedFruits = [];
}
}
}

最后，我們需要在全選checkbox的HTML代碼中使用v-on指令來綁定checkAll方法。每次全選checkbox被點(diǎn)擊時，該方法都會被觸發(fā)，并根據(jù)isCheckedAll變量的值來修改checkedFruits變量。

全選

通過這些簡單的步驟，我們就實(shí)現(xiàn)了全選/取消全選的功能。Vue的數(shù)據(jù)綁定和變量監(jiān)聽機(jī)制為我們提供了非常便利的實(shí)現(xiàn)方式，更是體現(xiàn)了Vue的優(yōu)秀設(shè)計(jì)。