vue input 多选框

可以使用 Vue 实现多选框，具体可以参考以下代码：

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

<script>
export default {
  data() {
    return {
      fruits: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橘子' },
        { id: 4, name: '葡萄' },
      ],
      selectedFruits: [],
    };
  },
};
</script>

在上述代码中，我们通过 `v-for` 指令对水果列表进行遍历，并给每个多选框绑定了一个 `v-model` 指令，将选中的水果名称保存到 `selectedFruits` 数组中。最后，我们将选中的水果展示出来。

相关问题

vue多选框数据读取

你可以通过v-model指令来实现vue多选框数据的读取。首先，你需要在data中定义一个数组属性来存储选中的值，例如：

data() {
  return {
    selectedOptions: []
  }
}

然后，在多选框的input元素上使用v-model指令来绑定这个数组属性，同时设置value属性来标识每个选项的值，例如：

<input type="checkbox" v-model="selectedOptions" value="option1">
<input type="checkbox" v-model="selectedOptions" value="option2">
<input type="checkbox" v-model="selectedOptions" value="option3">

这样，当用户选择或取消选择多选框时，selectedOptions数组将自动更新。你可以在组件中使用这个数组来读取选中的值。例如，可以使用v-for指令遍历selectedOptions数组来展示选中的值：

<div v-for="option in selectedOptions" :key="option">
  {{ option }}
</div>

这样，每当用户选择或取消选择多选框时，选中的值将会动态显示在页面上。

vue 多选框 代码

下面是一个简单的 Vue 多选框组件的示例代码：

<template>
  <div>
    <h3>{{ title }}</h3>
    <ul>
      <li v-for="option in options" :key="option.value">
        <label>
          <input type="checkbox"
                 :value="option.value"
                 v-model="selectedOptions">
          {{ option.label }}
        </label>
      </li>
    </ul>
    <p>You have selected: {{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  name: 'MultiCheckbox',
  props: {
    title: {
      type: String,
      required: true
    },
    options: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      selectedOptions: []
    }
  }
}
</script>

上面的代码使用了 props 传递了标题和选项数组，然后使用 v-for 指令在模板中渲染多个复选框。使用 v-model 指令将选中的值绑定到组件的 data 中，然后在模板中展示选中的值。