在Vue中,獲取checkbox的值并不是一件難事。首先,我們需要在Vue實例中定義一個data對象,用于存儲數(shù)據(jù)。我們可以通過v-model指令將checkbox的值與data中定義的屬性綁定。
//定義Vue實例 var app = new Vue({ el: '#app', data: { checked: false } })
接下來,我們可以通過v-on指令在checkbox的change事件中調(diào)用一個方法來獲取checkbox的值。在這個方法中,我們可以通過this關(guān)鍵字獲取data中定義的屬性值。
//定義Vue實例 var app = new Vue({ el: '#app', data: { checked: false }, methods: { getCheckedValue: function(event) { this.checked = event.target.checked } } })
最后,我們需要在checkbox標(biāo)簽中使用v-model指令將checkbox的值與data中定義的屬性“checked”綁定,使用v-on指令在change事件中調(diào)用getCheckedValue方法,如下所示:
<div id="app"> <input type="checkbox" id="myCheckbox" v-model="checked" v-on:change="getCheckedValue"> <label for="myCheckbox">選中我</label> </div>
現(xiàn)在,我們已經(jīng)成功地獲取了checkbox的值,并綁定到了Vue實例中的data屬性中。我們可以在需要的時候通過this.checked來使用這個值。