Vue的Checkbox組件可用于選擇多個選項。當(dāng)用戶在表單中需要選擇多個選項時，Checkbox組件往往是最好的選擇。使用Vue的Checkbox組件可以輕松地創(chuàng)建一個包含多個可選選項的表單。

下面是一個示例代碼，它展示了如何使用Vue的Checkbox組件創(chuàng)建一個簡單的表單：

<template>
<div>
<h2>喜歡的水果</h2>
<div v-for="fruit in fruits" :key="fruit.id">
<label :for="fruit.name">{{fruit.name}}</label>
<input type="checkbox" :id="fruit.name" v-model="fruit.checked">
</div>
<button @click="submit">提交</button>
</div>
</template>
<script>
export default {
data() {
return {
fruits: [
{ id: 1, name: "蘋果", checked: false },
{ id: 2, name: "香蕉", checked: false },
{ id: 3, name: "葡萄", checked: false },
{ id: 4, name: "草莓", checked: false }
]
};
},
methods: {
submit() {
const selectedFruits = this.fruits.filter(fruit =>fruit.checked);
alert("已選擇：" + selectedFruits.map(fruit =>fruit.name).join(", "));
}
}
};
</script>

在上面的代碼中，v-for指令用于循環(huán)遍歷fruits數(shù)組，并使用v-model指令將每個復(fù)選框的選中狀態(tài)與fruits數(shù)組中的對應(yīng)項綁定。點(diǎn)擊提交按鈕時，submit方法會將選中的水果名稱彈出提示框中。

Vue的Checkbox組件還支持其他屬性和事件，例如：disabled屬性、change事件等。在實(shí)際使用中，可以根據(jù)具體需求使用這些屬性和事件。