在Vue中,我們可以使用v-model指令綁定一個數(shù)據(jù)來控制checkbox的選中狀態(tài)。如果要實(shí)現(xiàn)全選功能,我們需要用到一些特殊的技巧。下面是一個示例代碼:
<template>
<div>
<label><input type="checkbox" v-model="allSelected">全選</label>
<div v-for="item in itemList">
<label>
<input type="checkbox" v-model="item.selected">
{{ item.label }}
</label>
</div>
</div>
</template>
<script>
export default {
data() {
return {
itemList: [
{ label: '選項(xiàng)1', selected: false },
{ label: '選項(xiàng)2', selected: false },
{ label: '選項(xiàng)3', selected: false },
{ label: '選項(xiàng)4', selected: false }
],
allSelected: false
}
},
watch: {
itemList: {
handler(newVal) {
// 檢查是否全部選中
this.allSelected = newVal.every(item =>item.selected)
},
deep: true
},
allSelected(newVal) {
// 全選或全不選
this.itemList.forEach(item =>{
item.selected = newVal
})
}
}
}
</script>
在上面的代碼中,我們使用一個itemList數(shù)組來存儲所有的選項(xiàng)。每個選項(xiàng)包含一個label屬性和一個selected屬性,用來表示是否選中。我們還定義了一個allSelected屬性,用來表示是否全選。
在模板中,我們使用v-for指令循環(huán)遍歷itemList數(shù)組,并使用v-model指令綁定每個選項(xiàng)的選中狀態(tài)。我們還使用一個全選的checkbox,并使用v-model指令綁定allSelected屬性。當(dāng)allSelected屬性改變時,我們使用watch監(jiān)聽器來自動更新所有選項(xiàng)的selected屬性。
這樣,我們就實(shí)現(xiàn)了一個簡單的全選功能。如果你需要更復(fù)雜的需求,可以根據(jù)這個例子進(jìn)行擴(kuò)展。