Vue的checkbox組件提供了便捷的多選功能,多選結果以數組形式呈現。通過v-model綁定數據,可以在組件中快速獲取和修改多選結果。
<template>
<div>
<label v-for="item in options" :key="item.id">
<input type="checkbox" :value="item.value" v-model="selected">{{ item.label }}
</label>
</div>
</template>
<script>
export default {
data() {
return {
selected: [] // 存儲多選結果的數組
}
},
computed: {
options() {
return [
{ id: 1, value: 1, label: '選項1' },
{ id: 2, value: 2, label: '選項2' },
{ id: 3, value: 3, label: '選項3' }
]
}
}
}
</script>
上述代碼中,通過v-for循環生成多個checkbox,并通過v-model綁定到selected數組上。當用戶選中或取消某個checkbox時,該選項的value值會自動加入或刪除selected數組中。
在實際應用中,我們可以通過computed計算屬性篩選出選中的選項,或通過watch監聽selected數組的變化,執行相應的操作。
上一篇c json嵌套
下一篇mysql創建函數的權限