在Vue中,我們可以使用input checked來處理復選框的選中狀態。這個屬性可以讓我們在模板中直接綁定一個變量,然后在選中或取消選中的時候,相應的變量就會發生改變。下面我們來看一下具體的實現過程。
// 在模板中綁定變量
<template>
<div>
<label>第一個復選框</label>
<input type="checkbox" v-model="isChecked">
</div>
</template>
// 在script中聲明變量
export default {
data() {
return {
isChecked: false
}
}
}
上面的代碼中,我們在模板中使用了v-model來綁定了isChecked變量,相當于這個變量已經和選中狀態建立了聯系。在script中,我們聲明了isChecked變量,并賦初值為false。這樣,在頁面渲染之后,第一個復選框默認是未選中狀態。
現在,我們來看一下當選中或取消選中的時候,isChecked變量會發生怎樣的變化。我們可以在script中,使用watch來監聽isChecked變量的變化。
export default {
data() {
return {
isChecked: false
}
},
watch: {
isChecked(val) {
console.log(val)
}
}
}
上面的代碼中,我們用watch來監測isChecked變量的變化,并在控制臺輸出它的最新值。那么現在我們在頁面中選中或取消選中這個復選框,會發生什么呢?我們可以打開控制臺,在選中或取消選中這個復選框的時候觀察一下控制臺輸出的內容。
綜上所述,我們可以利用input checked屬性來處理復選框的選中狀態,并通過綁定變量和watch來監聽選中狀態的變化。