Vue是一款流行的JavaScript框架，它為前端開發人員提供了許多方便的工具和功能。在Vue中，我們可以輕松地實現全選復選框的功能。下面是一個簡單的例子，演示如何使用Vue實現全選和反選復選框。

<template>
<div>
<input type="checkbox" v-model="allSelected" @change="toggleAllSelected"> 全選
<br>
<label v-for="(item, index) in items" :key="index">
<input type="checkbox" :value="item" v-model="selectedItems">
{{ item }}
</label>
<br>
<button @click="toggleSelected">反選</button>
</div>
</template>
<script>
export default {
data() {
return {
items: ['蘋果', '香蕉', '橘子', '梨'],
selectedItems: [],
allSelected: false
}
},
methods: {
toggleAllSelected() {
if (this.allSelected) {
this.selectedItems = [...this.items]
} else {
this.selectedItems = []
}
},
toggleSelected() {
this.selectedItems = this.items.filter(item =>!this.selectedItems.includes(item))
this.allSelected = this.selectedItems.length === this.items.length
}
},
watch: {
selectedItems(val) {
this.allSelected = val.length === this.items.length
}
}
}
</script>

上面的例子中，我們使用v-model指令將全選復選框與數據屬性allSelected綁定，同時將每個復選框與selectedItems數組中的相應元素綁定。在toggleAllSelected方法中，我們判斷allSelected屬性的值是否為true，如果是就將selectedItems數組設置為items數組的副本，否則就將selectedItems數組清空。在toggleSelected方法中，我們使用數組的filter方法來過濾選中的選項，并更新selectedItems數組和allSelected屬性。最后，在watch對象中，我們監聽selectedItems數組的變化，如果其長度等于items數組的長度，就將allSelected屬性設置為true。

通過這個例子，我們可以看到，在Vue中實現全選和反選復選框功能非常簡單。我們只需要使用v-model指令和一些簡單的JavaScript代碼，就能夠輕松地實現這些功能。