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

在Vue中，可以使用v-for指令绑定多组复选框和单选框。下面分别介绍如何绑定多组复选框和单选框。

1. 绑定多组复选框

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <input type="checkbox" :id="item.id" :value="item.value" v-model="checkedItems">
      <label :for="item.id">{{ item.label }}</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, value: 'apple', label: '苹果' },
        { id: 2, value: 'banana', label: '香蕉' },
        { id: 3, value: 'orange', label: '橙子' }
      ],
      checkedItems: []
    }
  }
}
</script>

上述代码中使用v-for指令遍历items数组，生成多组复选框。使用v-model指令将复选框的选中状态与checkedItems数组绑定，checkedItems数组会根据选中的复选框动态更新。

2. 绑定多组单选框

<template>
  <div>
    <div v-for="item in items" :key="item.id">
      <input type="radio" :id="item.id" :value="item.value" v-model="selectedItem">
      <label :for="item.id">{{ item.label }}</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, value: 'apple', label: '苹果' },
        { id: 2, value: 'banana', label: '香蕉' },
        { id: 3, value: 'orange', label: '橙子' }
      ],
      selectedItem: ''
    }
  }
}
</script>

上述代码中使用v-for指令遍历items数组，生成多组单选框。使用v-model指令将单选框的选中状态与selectedItem变量绑定，selectedItem变量会根据选中的单选框动态更新。请注意，单选框的name属性应该相同，这样才能实现单选的效果。