当前位置：首页 > VUE

vue如何实现单选

2026-01-08 07:06:45VUE

Vue 实现单选的方法

在 Vue 中实现单选功能可以通过多种方式完成，以下是几种常见的实现方法：

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

通过 v-model 绑定到同一个变量，确保同一时间只有一个选项被选中。

vue如何实现单选

<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>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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

使用 `v-for` 动态生成单选按钮

如果选项是动态的，可以通过 v-for 循环生成单选按钮。

vue如何实现单选

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

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

使用自定义组件封装单选逻辑

如果需要复用单选逻辑，可以封装一个自定义的单选组件。

<template>
  <div>
    <RadioGroup v-model="selectedOption" :options="options" />
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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

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

使用第三方库（如 Element UI）

如果项目中使用了 UI 库（如 Element UI），可以直接使用其提供的单选组件。

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

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