当前位置：首页 > VUE

vue实现单选状态

2026-01-16 22:44:23VUE

实现单选状态的方法

在Vue中实现单选状态通常可以通过以下几种方式完成，具体取决于使用场景和需求。

使用`v-model`绑定单选按钮

通过v-model可以轻松实现单选按钮的选择状态绑定。将同一组单选按钮绑定到同一个变量，Vue会自动处理选中状态的切换。

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

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

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

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

使用自定义组件实现单选

如果需要更灵活的控制，可以封装一个自定义的单选组件。通过v-model和事件处理实现单选逻辑。

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

<script>
import RadioButton from './RadioButton.vue';

export default {
  components: {
    RadioButton
  },
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'opt1', label: 'Option 1' },
        { value: 'opt2', label: 'Option 2' },
        { value: 'opt3', label: 'Option 3' }
      ]
    };
  }
};
</script>

RadioButton.vue组件的实现：

<template>
  <label>
    <input 
      type="radio" 
      :value="value" 
      :checked="modelValue === value" 
      @change="$emit('update:modelValue', value)" 
    />
    <slot></slot>
  </label>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true
    },
    modelValue: {
      type: String,
      default: ''
    }
  }
};
</script>

使用第三方UI库

许多第三方UI库（如Element UI、Vuetify、Ant Design Vue）提供了现成的单选组件，可以直接使用。

以Element UI为例：

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

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

动态生成单选按钮

如果需要根据数据动态生成单选按钮，可以使用v-for指令遍历选项数组。

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

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