当前位置：首页 > VUE

vue checbox实现单选

2026-02-19 03:30:39VUE

Vue Checkbox 实现单选

在 Vue 中，通常使用 v-model 绑定复选框的值。默认情况下，复选框允许多选，但可以通过以下方法实现单选效果。

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

通过将多个复选框绑定到同一个变量，利用计算属性或方法确保只有一个选项被选中。

vue checbox实现单选

<template>
  <div>
    <input type="checkbox" v-model="selectedOption" value="option1" @change="handleChange('option1')">
    <label>Option 1</label>
    <input type="checkbox" v-model="selectedOption" value="option2" @change="handleChange('option2')">
    <label>Option 2</label>
    <input type="checkbox" v-model="selectedOption" value="option3" @change="handleChange('option3')">
    <label>Option 3</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    }
  },
  methods: {
    handleChange(value) {
      if (this.selectedOption === value) {
        this.selectedOption = value;
      } else {
        this.selectedOption = value;
      }
    }
  }
}
</script>

方法二：使用 `radio` 模拟复选框样式

虽然技术上使用单选框（radio），但可以通过 CSS 样式使其看起来像复选框。

vue checbox实现单选

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

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

方法三：动态取消其他选项

通过监听复选框的变化，动态取消其他选项的选中状态。

<template>
  <div>
    <input type="checkbox" v-model="options.option1" @change="handleSingleSelect('option1')">
    <label>Option 1</label>
    <input type="checkbox" v-model="options.option2" @change="handleSingleSelect('option2')">
    <label>Option 2</label>
    <input type="checkbox" v-model="options.option3" @change="handleSingleSelect('option3')">
    <label>Option 3</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: {
        option1: false,
        option2: false,
        option3: false
      }
    }
  },
  methods: {
    handleSingleSelect(selectedOption) {
      for (const option in this.options) {
        this.options[option] = option === selectedOption;
      }
    }
  }
}
</script>

方法四：使用第三方库

如果需要更复杂的功能，可以使用第三方库如 v-checkbox 或自定义组件来实现单选效果。

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

<script>
import VCheckbox from 'v-checkbox';

export default {
  components: {
    VCheckbox
  },
  data() {
    return {
      selectedOption: ''
    }
  }
}
</script>