在Vue.2.0中，全選是一個非常常見的需求。當我們有一個包含多個選項的列表，而我們想要同時處理這些選項時，全選是一個非常方便的工具。那么，在Vue.2.0中如何實現全選呢？下面我們將一步步來實現。

<template>
<div>
<input type="checkbox" v-model="isCheckedAll" @change="checkAll"> 全選
<ul>
<li v-for="(item, index) in options" :key="index">
<input type="checkbox" v-model="item.isChecked"> {{ item.label }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
options: [
{ label: '選項一', isChecked: false },
{ label: '選項二', isChecked: false },
{ label: '選項三', isChecked: false },
{ label: '選項四', isChecked: false },
{ label: '選項五', isChecked: false },
],
isCheckedAll: false,
}
},
methods: {
checkAll() {
this.options.forEach(item => {
item.isChecked = this.isCheckedAll;
});
}
},
watch: {
options: {
handler(arr) {
this.isCheckedAll = arr.every(item => item.isChecked);
},
deep: true,
},
},
}
</script>

首先，在模板中，我們需要有一個全選的checkbox和一個包含多個選項的ul列表。我們為每個選項定義一個isChecked屬性，初始值為false。

接下來，在script中，我們提供了一個checkAll的方法，該方法接受全選checkbox的change事件作為觸發器。該方法遍歷options數組，并將每個isChecked設置為isCheckedAll。

為了方便監測isCheckedAll的狀態，我們引入了一個watch，在options數組的任何改變作用域下執行handler，深度檢測options數組的變化。其余的就和普通的vue的雙向數據綁定一樣了。

需要注意的是，由于vue對于對象的檢測不是很穩定，所以我們需要顯式地聲明深度檢查。

到這里，我們已經完成了一個vue.2.0全選的實現。