当前位置：首页 > VUE

vue实现单选互斥

2026-01-19 07:52:09VUE

实现单选互斥的方法

在Vue中实现单选互斥功能，可以通过以下几种方式实现：

使用v-model绑定同一变量

通过将多个单选按钮绑定到同一个变量，Vue会自动处理互斥逻辑。当选择一个选项时，其他选项会自动取消选中。

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

    <input type="radio" id="option2" value="option2" v-model="selectedOption">
    <label for="option2">Option 2</label>

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

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

使用原生name属性

vue实现单选互斥

HTML原生的radio按钮通过相同的name属性实现互斥，这种方法不依赖Vue。

<template>
  <div>
    <input type="radio" id="option1" name="options" value="option1">
    <label for="option1">Option 1</label>

    <input type="radio" id="option2" name="options" value="option2">
    <label for="option2">Option 2</label>

    <input type="radio" id="option3" name="options" value="option3">
    <label for="option3">Option 3</label>
  </div>
</template>

使用组件库的单选组

vue实现单选互斥

流行的UI组件库如Element UI、Vuetify等都提供了单选组组件，内置了互斥功能。

<template>
  <el-radio-group v-model="selectedOption">
    <el-radio label="option1">Option 1</el-radio>
    <el-radio label="option2">Option 2</el-radio>
    <el-radio label="option3">Option 3</el-radio>
  </el-radio-group>
</template>

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

自定义实现

如果需要更复杂的控制，可以自定义实现互斥逻辑。

<template>
  <div>
    <div 
      v-for="option in options" 
      :key="option.value"
      @click="selectOption(option.value)"
      :class="{ 'selected': selectedOption === option.value }">
      {{ option.label }}
    </div>
  </div>
</template>

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