Vue checkbox的寫法非常簡單,只需要按照以下步驟來創建即可。
首先,在Vue實例中定義一個數組來存儲checkbox選中的項,在這個數組中,每一項都是一個布爾值,表示該項是否被選中。data() {
return {
checkedList: []
}
}
接著,在HTML模板中使用v-for指令遍歷一個數組來渲染所有的checkbox,同時使用v-model指令將每個checkbox和其對應的數組項綁定起來,這樣在用戶選中或取消選中某個checkbox時,對應的數組項的值也會修改。
最后,在computed中定義一個計算屬性來統計選中的checkbox的個數,計算屬性的值會隨著checkedList數組中布爾值為true的項的個數而更新。computed: {
checkedCount() {
return this.checkedList.filter(item =>item).length
}
}
以上就是Vue checkbox的基本寫法,你可以根據自己的需求對其進行進一步的優化和擴展。
上一篇python 賬本系統
下一篇c json封裝類