vue 中实现单选框多选框绑定同一个值

在 Vue 中实现单选框和多选框绑定同一个值需要使用 v-model 指令和数组。具体实现方法如下：

1. 单选框绑定同一个值：

<template>
  <div>
    <label>
      <input type="radio" value="male" v-model="gender">
      Male
    </label>
    <label>
      <input type="radio" value="female" v-model="gender">
      Female
    </label>
    <p>Selected gender: {{ gender }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gender: ''
    };
  }
};
</script>

在上述代码中，我们使用了 v-model 指令将单选框的值绑定到了 gender 变量上。当用户选择不同的选项时，gender 变量的值也会相应地改变。

2. 多选框绑定同一个值：

<template>
  <div>
    <label>
      <input type="checkbox" value="apple" v-model="fruits">
      Apple
    </label>
    <label>
      <input type="checkbox" value="banana" v-model="fruits">
      Banana
    </label>
    <label>
      <input type="checkbox" value="orange" v-model="fruits">
      Orange
    </label>
    <p>Selected fruits: {{ fruits }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: []
    };
  }
};
</script>

在上述代码中，我们使用了 v-model 指令将多选框的值绑定到了 fruits 数组上。当用户选择不同的选项时，fruits 数组的值也会相应地改变。

需要注意的是，单选框和多选框的 value 值必须是不同的，否则无法正确地绑定值。