vue checkbox 組件是一個(gè)非常實(shí)用的用戶(hù)界面控件，可以讓用戶(hù)方便地進(jìn)行多選操作。使用vue checkbox 組件，可以使用戶(hù)的操作更加便捷，提高用戶(hù)體驗(yàn)。下面我們將通過(guò)一個(gè)簡(jiǎn)單的例子，來(lái)展示如何使用 vue checkbox 組件。

<template>
<div>
<h2>{{ title }}</h2>
<div v-for="(item, index) in list" :key="index">
<input type="checkbox"
:id="'checkbox-' + index"
:value="item"
v-model="selected">
<label :for="'checkbox-' + index"></label>
<span>{{ item }}</span>
</div>
<button @click="confirm">確定</button>
</div>
</template>
<script>
export default {
data() {
return {
title: '請(qǐng)選擇',
list: ['apple', 'banana', 'orange', 'grape'],
selected: []
}
},
methods: {
confirm() {
console.log(this.selected);
}
}
}
</script>

在上面的例子中，我們首先定義了一個(gè)包含多個(gè)選項(xiàng)的數(shù)組 list，然后使用 v-for 指令遍歷數(shù)組，并在每個(gè)選項(xiàng)前放置一個(gè) checkbox，同時(shí)將 checkbox 的值綁定為當(dāng)前選項(xiàng)的值，使用 v-model 指令將 checkbox 的選擇狀態(tài)綁定到 selected 數(shù)組中。

最后，我們還為確定按鈕綁定了一個(gè) click 事件，當(dāng)用戶(hù)點(diǎn)擊確定時(shí)，selected 數(shù)組中將包含所有被選擇的選項(xiàng)的值。通過(guò)這種方式，使用 vue checkbox 組件，用戶(hù)可以方便地進(jìn)行多選操作。