Vue中使用v-for绑定多组复选框和单选框

在Vue中使用v-for绑定多组复选框或单选框，可以通过在v-for指令中使用一个数组，然后在模板中使用v-model指令来实现。

对于多组复选框，可以先定义一个数组来存储所有的选项，然后使用v-for指令遍历数组，将每个选项绑定到一个复选框上，并使用v-model指令将选项的值绑定到一个选中的数组中。例如：

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

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

对于单选框，可以使用类似的方法，只需要将v-model指令绑定到一个单一的变量上。例如：

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

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