vue实现checkbox单选

实现 Checkbox 单选的方法

在 Vue 中实现 Checkbox 的单选效果可以通过以下方式完成：

使用 v-model 绑定单个变量

通过将多个 Checkbox 绑定到同一个变量，并设置不同的值，可以实现单选效果。当用户选择其中一个 Checkbox 时，变量的值会更新为当前选中的值，其他 Checkbox 会自动取消选中。

<template>
  <div>
    <label>
      <input type="checkbox" v-model="selectedOption" value="option1">
      Option 1
    </label>
    <label>
      <input type="checkbox" v-model="selectedOption" value="option2">
      Option 2
    </label>
    <label>
      <input type="checkbox" v-model="selectedOption" value="option3">
      Option 3
    </label>
  </div>
</template>

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

使用计算属性和自定义方法

如果需要更复杂的逻辑控制，可以通过计算属性和自定义方法实现单选效果。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="checkbox" 
        :checked="selectedOption === option.value"
        @change="handleChange(option.value)"
      >
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ],
      selectedOption: ''
    };
  },
  methods: {
    handleChange(value) {
      this.selectedOption = value;
    }
  }
};
</script>

使用 v-for 动态渲染选项

如果需要动态渲染选项，可以使用 v-for 循环遍历选项列表，并结合 v-model 实现单选。

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

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

使用 radio 替代 checkbox

如果目标是实现单选效果，可以考虑直接使用 radio 按钮，因为它的设计初衷就是单选。

<template>
  <div>
    <label>
      <input type="radio" v-model="selectedOption" value="option1">
      Option 1
    </label>
    <label>
      <input type="radio" v-model="selectedOption" value="option2">
      Option 2
    </label>
    <label>
      <input type="radio" v-model="selectedOption" value="option3">
      Option 3
    </label>
  </div>
</template>

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

注意事项

• 使用 checkbox 实现单选时，需要确保 v-model 绑定的变量是单一值，而不是数组。
• 如果用户需要取消选中，可能需要额外逻辑处理。
• 对于纯粹的单选场景，建议优先使用 radio 按钮。