vue循环多个多选框

可以使用`v-for`指令来循环多个多选框，例如：

<template>
  <div>
    <label v-for="(item, index) in options" :key="index">
      <input type="checkbox" :value="item.value" v-model="selectedOptions">
      {{ item.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { label: '选项1', value: 1 },
        { label: '选项2', value: 2 },
        { label: '选项3', value: 3 }
      ],
      selectedOptions: []
    }
  }
}
</script>

在上面的代码中，我们循环了一个包含三个选项的数组`options`，使用`v-model`指令来绑定被选中的选项的值，这里是一个数组`selectedOptions`，当多选框被选中时，选中的值将会被添加到`selectedOptions`数组中。

相关问题

vue + iview 循环数组到多选框

的选中状态如何绑定？

你可以使用 v-model 来绑定多选框的选中状态，将已选择的值保存在一个数组中，可以通过 v-for 循环渲染多个多选框，每个多选框的选中状态通过绑定数组中对应的值来控制。例如：

<template>
<div>
<div v-for="item in options" :key="item.value">
<Checkbox v-model="selected" :label="item.value">{{ item.label }}</Checkbox>
</div>
<div>已选择：{{ selected }}</div>
</div>
</template>

<script>
import { Checkbox } from 'iview';

export default {
components: { Checkbox },
data() {
return {
options: [{ value: 'apple', label: '苹果' }, { value: 'banana', label: '香蕉' }],
selected: [],
};
},
};
</script>

vue 多选框 列表组件

以下是一个使用 Vue.js 实现多选框列表组件的示例代码：

<template>
  <div>
    <div v-for="option in options" :key="option.value">
      <label>
        <input type="checkbox" :value="option.value" v-model="selectedOptions">
        {{ option.label }}
      </label>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      selectedOptions: this.value
    };
  },
  watch: {
    selectedOptions: function (newValue) {
      this.$emit('input', newValue);
    }
  }
};
</script>

这个组件接受一个 `options` 数组作为输入，每个选项包含一个 `value` 和 `label` 属性。它还接受一个 `value` 数组作为默认选中的选项。

在组件中使用 `v-for` 循环遍历 `options` 数组来渲染每个选项，将每个选项渲染成一个带有标签文本和复选框的 `label` 元素。通过使用 `v-model` 指令将 `selectedOptions` 数组绑定到每个复选框的状态上，以便在选项被选中或取消选中时更新它。

当 `selectedOptions` 数组发生变化时，组件会触发一个名为 `input` 的事件，并传递更新后的数组作为参数。父组件可以通过监听这个事件来获取选中的选项。