色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue checkbox 動態(tài)

林國瑞2年前8瀏覽0評論

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)和數據渲染。