当前位置：首页 > VUE

vue实现单选按钮

2026-01-08 08:32:02VUE

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

在 Vue 中，可以通过 v-model 实现单选按钮的数据绑定。单选按钮组需要共享同一个 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>

动态生成单选按钮组

可以通过 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: 'apple', label: '苹果' },
        { value: 'banana', label: '香蕉' },
        { value: 'orange', label: '橙子' }
      ]
    };
  }
};
</script>

使用组件库的单选按钮

主流 UI 库如 Element UI、Ant Design Vue 提供了封装好的单选组件，可直接调用。

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>

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

处理单选按钮事件

可以通过 @change 监听单选按钮的变化，触发自定义逻辑。

<template>
  <div>
    <input
      type="radio"
      id="dark"
      value="dark"
      v-model="theme"
      @change="handleThemeChange"
    />
    <label for="dark">深色模式</label>

    <input
      type="radio"
      id="light"
      value="light"
      v-model="theme"
      @change="handleThemeChange"
    />
    <label for="light">浅色模式</label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      theme: 'light'
    };
  },
  methods: {
    handleThemeChange() {
      console.log('主题已切换至:', this.theme);
    }
  }
};
</script>

表单验证与单选按钮

结合 Vue 表单验证库（如 VeeValidate）实现单选按钮的必选验证。

<template>
  <div>
    <input
      type="radio"
      id="agree"
      value="true"
      v-model="isAgreed"
      name="agreement"
      v-validate="'required'"
    />
    <label for="agree">同意协议</label>
    <span v-show="errors.has('agreement')" class="error">
      {{ errors.first('agreement') }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAgreed: false
    };
  }
};
</script>

vue实现单选按钮