vue多选框

<template>
  <div>
    <h3>请选择您喜欢的水果：</h3>
    <div v-for="(fruit, index) in fruits" :key="index">
      <input type="checkbox" :id="fruit" :value="fruit" v-model="selectedFruits">
      <label :for="fruit">{{ fruit }}</label>
    </div>
    <p>您选择的水果是：{{ selectedFruits }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: ['苹果', '香蕉', '橙子', '葡萄'],
      selectedFruits: []
    };
  }
};
</script>

<style scoped>
/* 添加一些样式 */
label {
  margin-right: 20px;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用 v-for 指令循环遍历 fruits 数组，生成多个复选框。
   • 每个复选框通过 v-model 绑定到 selectedFruits 数组，当用户勾选或取消勾选时，selectedFruits 数组会自动更新。
   • 使用 :id 和 :for 动态绑定每个复选框和标签，确保点击标签也能选中对应的复选框。

2. 脚本部分 (<script>):

   • 定义了两个数据属性：fruits 是一个包含水果名称的数组，selectedFruits 是一个空数组，用于存储用户选择的水果。

3. 样式部分 (<style scoped>):

   • 为 label 标签添加了一些简单的样式，使它们之间有一定的间距。

这样，用户可以选择多个水果，并且选择的结果会实时显示在页面上。