vue实现单选

2026-01-13 00:50:31VUE

实现 Vue 单选功能

在 Vue 中实现单选功能可以通过多种方式完成，常见的有使用原生 HTML 的 <input type="radio"> 结合 Vue 的数据绑定，或使用第三方 UI 库如 Element UI、Ant Design Vue 等。

使用原生 HTML 实现

通过 v-model 绑定单选按钮的值，确保同一组单选按钮的 name 属性相同。

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

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

使用 Element UI 实现

如果项目中使用 Element UI，可以通过 <el-radio> 或 <el-radio-group> 快速实现单选功能。

<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>

动态生成单选按钮

通过 v-for 动态生成单选按钮，适合选项从后端获取的场景。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input type="radio" v-model="selectedOption" :value="option.value" name="dynamicOptions">
      {{ 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>

自定义样式单选按钮

通过 CSS 隐藏原生单选按钮，自定义样式实现更美观的视觉效果。

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

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

<style>
.custom-radio input[type="radio"] {
  display: none;
}
.custom-radio label {
  display: inline-block;
  padding: 8px 16px;
  background: #f0f0f0;
  border-radius: 4px;
  cursor: pointer;
}
.custom-radio input[type="radio"]:checked + label {
  background: #409eff;
  color: white;
}
</style>