vue实现单选

2026-01-11 21:13:32VUE

Vue 实现单选按钮

在 Vue 中实现单选按钮通常使用 v-model 绑定数据，结合 <input type="radio"> 或第三方组件库（如 Element UI、Ant Design Vue 等）。以下是几种实现方式：

原生 HTML 单选按钮

通过 v-model 绑定一个变量，单选按钮的 value 属性决定选中时绑定的值。

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

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

    <p>选中的选项: {{ 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">选项1</el-radio>
      <el-radio label="option2">选项2</el-radio>
    </el-radio-group>
    <p>选中的选项: {{ selectedOption }}</p>
  </div>
</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>
    <p>选中的选项: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: "",
      options: [
        { value: "option1", label: "选项1" },
        { value: "option2", label: "选项2" },
      ],
    };
  },
};
</script>

自定义样式单选按钮

通过 CSS 隐藏原生 <input>，用 <label> 实现自定义样式。

<template>
  <div>
    <div class="custom-radio">
      <input
        type="radio"
        id="customOption1"
        value="option1"
        v-model="selectedOption"
      />
      <label for="customOption1">选项1</label>
    </div>
    <div class="custom-radio">
      <input
        type="radio"
        id="customOption2"
        value="option2"
        v-model="selectedOption"
      />
      <label for="customOption2">选项2</label>
    </div>
    <p>选中的选项: {{ selectedOption }}</p>
  </div>
</template>

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

<style>
.custom-radio input[type="radio"] {
  opacity: 0;
  position: absolute;
}
.custom-radio label {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #ccc;
  cursor: pointer;
}
.custom-radio input[type="radio"]:checked + label {
  background-color: #42b983;
  color: white;
}
</style>