当前位置：首页 > VUE

vue如何实现单选

2026-03-07 22:21:49VUE

Vue 实现单选的方法

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

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

通过 v-model 绑定一个变量到单选按钮组，确保同一组的单选按钮具有相同的 name 属性。

<template>
  <div>
    <input type="radio" id="option1" value="option1" v-model="selectedOption" name="options" />
    <label for="option1">Option 1</label>
    <input type="radio" id="option2" value="option2" v-model="selectedOption" name="options" />
    <label for="option2">Option 2</label>
    <input type="radio" id="option3" value="option3" v-model="selectedOption" name="options" />
    <label for="option3">Option 3</label>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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

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

如果选项是动态的，可以通过 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" 
        name="dynamicOptions" 
      />
      <label :for="option.value">{{ option.label }}</label>
    </div>
    <p>Selected option: {{ selectedOption }}</p>
  </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>

使用组件库实现单选

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

以 Element UI 为例：

vue如何实现单选

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

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