Vue中的復選框是我們經常用到的表單元素之一,通過它我們可以讓用戶選擇多個選項,并將選中的值提交到后端。在Vue中如果想要獲取復選框的選中值,我們需要使用v-model指令來綁定數據,并在處理提交操作時獲取選中的值。
舉個例子,假設我們有一個復選框組件CheckBox,我們可以這樣定義:
<template>
<div>
<input type="checkbox" v-model="checked">選項一
<input type="checkbox" v-model="checked">選項二
<input type="checkbox" v-model="checked">選項三
</div>
</template>
<script>
export default {
name: 'CheckBox',
data() {
return {
checked: []
}
}
}
</script>
在上面的代碼中,我們使用了v-model指令將所有復選框元素的選擇狀態綁定到一個數組checked上。在data中初始化checked為空數組,表示所有的復選框都未選中。現在我們來看看如何獲取選中的值:
<button @click="submit">提交</button>
methods: {
submit() {
console.log(this.checked);
// 將選中的值提交到后端
}
}
在以上代碼中,我們定義了一個submit方法,在點擊提交按鈕時調用該方法。我們可以通過this.checked獲取所有選中的值,并按照需要進行處理。例如將其提交到后端進行保存。
上一篇html廣告界面代碼