当前位置：首页 > VUE

vue单选按钮实现

2026-02-25 16:12:06VUE

实现 Vue 单选按钮的基本方法

使用 Vue 的单选按钮可以通过 v-model 绑定数据，结合 input 元素的 type="radio" 实现。以下是一个基础示例：

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

动态生成单选按钮

通过 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: '选项A' },
        { value: 'opt2', label: '选项B' }
      ]
    };
  }
};
</script>

使用组件库实现单选按钮

主流 UI 库如 Element UI 或 Vuetify 提供了封装好的单选组件：

Element UI 示例：

<template>
  <el-radio-group v-model="selectedOption">
    <el-radio label="option1">选项1</el-radio>
    <el-radio label="option2">选项2</el-radio>
  </el-radio-group>
</template>

Vuetify 示例：

<template>
  <v-radio-group v-model="selectedOption">
    <v-radio label="选项1" value="option1"></v-radio>
    <v-radio label="选项2" value="option2"></v-radio>
  </v-radio-group>
</template>

处理单选按钮事件

监听 change 事件实现业务逻辑：

<template>
  <input 
    type="radio" 
    value="notify" 
    v-model="notificationPref" 
    @change="handleNotificationChange"
  />
</template>

<script>
export default {
  methods: {
    handleNotificationChange() {
      console.log('用户选择变更:', this.notificationPref);
    }
  }
};
</script>

样式自定义技巧

通过 CSS 隐藏原生单选按钮，自定义样式：

vue单选按钮实现

<template>
  <label class="custom-radio">
    <input type="radio" v-model="selected" value="yes" />
    <span class="checkmark"></span>
    同意条款
  </label>
</template>

<style>
.custom-radio input {
  position: absolute;
  opacity: 0;
}
.checkmark {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #eee;
  border-radius: 50%;
}
.custom-radio input:checked ~ .checkmark {
  background-color: #2196F3;
}
</style>