Vue的checkbox可以動態(tài)設置選中狀態(tài),同時也可以綁定數據進行渲染。具體操作如下:
<template> <div> <input type="checkbox" v-model="isChecked" /> {{isChecked}} <ul> <li v-for="(item, index) in list" :key="index"> <input type="checkbox" :value="item.value" v-model="checkedItems" /> {{item.name}} </li> </ul> </div> </template> <script> export default { data() { return { isChecked: false, list: [ { name: "蘋果", value: "apple" }, { name: "香蕉", value: "banana" }, { name: "橙子", value: "orange" } ], checkedItems: [] }; } }; </script>
以上代碼中,第一個checkbox使用了v-model指令綁定了isChecked變量,通過isChecked的值來控制checkbox的選中狀態(tài),同時也可以在頁面上顯示當前isChecked的值。
第二個checkbox使用了v-for指令進行循環(huán)渲染,每個checkbox的選中狀態(tài)通過v-model指令綁定到checkedItems數組中。當選中某個checkbox時,該checkbox的value值會被添加到checkedItems數組中。
當需要動態(tài)設置checkbox的選中狀態(tài)時,可以通過改變isChecked或checkedItems變量的值來實現:
this.isChecked = true; // 設置第一個checkbox為選中狀態(tài) this.checkedItems = ["apple", "orange"]; // 設置第二個checkbox中的蘋果和橙子為選中狀態(tài)
通過以上操作,可以輕松地實現Vue的checkbox動態(tài)設置選中狀態(tài)和數據渲染。