{{ checked }}

var app = new Vue({
el: '#app',
data: {
checked: false
}
});

Vue框架提供了一種非常方便的方式來綁定checkbox的狀態(tài)到數(shù)據(jù)模型。然而，有時候我們會遇到checkbox無法正常工作的情況。

在上面的例子里，我們使用了v-model指令來綁定了一個checkbox。當checkbox狀態(tài)改變時，它的值被綁定到了checked屬性上。我們甚至在模板里加了一個插值語法，用來顯示checked屬性的值。但是，當我們嘗試勾選或取消該checkbox時，發(fā)現(xiàn)值并沒有正常地更新。

原因在于，當我們使用v-model綁定checkbox時，它會默認綁定的是input元素的value屬性。但是，對于Checkbox或Radio這樣的表單元素，value屬性通常是不需要的，而應該使用checked屬性來表達是否選中。

解決該問題的方法是使用v-bind指令將checkbox的狀態(tài)綁定到我們數(shù)據(jù)模型中的一個布爾值屬性，然后在change事件中更新該屬性的值。

在這個例子中，我們使用了v-bind指令來綁定checked屬性到數(shù)據(jù)模型中的checked屬性上。change事件被綁定到一個匿名函數(shù)上，在該函數(shù)中我們通過取反來更新該屬性。

當然，為了更好的復用性及可讀性，我們可以將該匿名函數(shù)定義為一個方法。

var app = new Vue({
el: '#app',
data: {
checked: false
},
methods: {
toggleChecked() {
this.checked = !this.checked;
}
}
})

現(xiàn)在，我們完成了一個可以正常工作的checkbox。當我們勾選或取消該checkbox時，數(shù)據(jù)模型中的checked屬性會正常地更新，并且在頁面上也會正確地顯示。