Vue中的v-model指令和綁定數據很常規,然而,如果你要處理復選框的情況呢?
這就需要使用v-bind指令和checked屬性來解決了。與v-model指令不同,v-bind指令只是綁定了一次數據,而不會在復選框的值改變時自動更新。所以,為了保持組件和數據的同步,需要使用v-on:change事件監聽復選框值的改變,再更新數據。
<div id="app"> <input type="checkbox" v-bind:checked="isChecked" v-on:change="updateChecked"> Check me </div> <script> var app = new Vue({ el: '#app', data: { isChecked: false }, methods: { updateChecked: function (event) { this.isChecked = event.target.checked } } }) </script>
在上面的示例中,我們在data對象中創建了一個名為isChecked的屬性,初始設置為false。在復選框的輸入元素中,我們綁定了v-bind:checked指令到這個屬性。同時,我們也添加了一個v-on:change事件監聽器,調用updateChecked方法來同步isChecked屬性的值。
如此,在復選框的改變事件中,組件總是可以使用最新的isChecked值,同時也更新了data對象中的屬性值。
上一篇python 拼照片形狀
下一篇C json 過長