vue实现checkbox单选

Vue实现Checkbox单选功能

在Vue中实现Checkbox单选功能，可以通过以下几种方法：

方法一：使用v-model绑定单个变量

通过将多个Checkbox绑定到同一个变量，利用v-model的特性实现单选效果。当选中一个选项时，其他选项会自动取消选中。

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

<script>
export default {
  data() {
    return {
      options: [
        { value: 'A', label: '选项A' },
        { value: 'B', label: '选项B' },
        { value: 'C', label: '选项C' }
      ],
      selectedOption: []
    }
  },
  methods: {
    handleChange(value) {
      this.selectedOption = [value];
    }
  }
}
</script>

方法二：使用radio样式模拟Checkbox

虽然这不是真正的Checkbox，但可以通过CSS样式让radio看起来像Checkbox，同时保持单选特性。

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

<script>
export default {
  data() {
    return {
      options: [
        { value: 'A', label: '选项A' },
        { value: 'B', label: '选项B' },
        { value: 'C', label: '选项C' }
      ],
      selectedOption: ''
    }
  }
}
</script>

<style>
.checkbox-style {
  appearance: checkbox;
  -webkit-appearance: checkbox;
}
</style>

方法三：使用计算属性

通过计算属性来控制选中状态，确保任何时候只有一个选项被选中。

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

<script>
export default {
  data() {
    return {
      options: [
        { value: 'A', label: '选项A' },
        { value: 'B', label: '选项B' },
        { value: 'C', label: '选项C' }
      ],
      selectedOption: ''
    }
  }
}
</script>

方法四：使用第三方库

可以使用如v-checkbox等第三方Vue组件库，它们通常提供单选Checkbox功能。

<template>
  <div>
    <v-checkbox
      v-for="option in options"
      :key="option.value"
      v-model="selectedOption"
      :label="option.label"
      :value="option.value"
      :multiple="false"
    />
  </div>
</template>

<script>
import { VCheckbox } from 'vuetify/lib';

export default {
  components: {
    VCheckbox
  },
  data() {
    return {
      options: [
        { value: 'A', label: '选项A' },
        { value: 'B', label: '选项B' },
        { value: 'C', label: '选项C' }
      ],
      selectedOption: ''
    }
  }
}
</script>

以上方法均可实现Checkbox单选功能，根据项目需求和偏好选择合适的方式。方法一和方法三使用纯Vue实现，方法二通过CSS模拟，方法四依赖第三方库但可能提供更多功能。