当前位置：首页 > VUE

vue 实现单选

2026-01-07 19:54:24VUE

使用 `v-model` 绑定单选值

在 Vue 中，可以通过 v-model 绑定单选按钮的值。定义一个响应式数据（如 selectedOption），并将其与单选按钮的 value 属性关联。

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

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

动态生成单选按钮

通过 v-for 动态渲染单选按钮列表，适合选项从接口或数组中获取的场景。

<template>
  <div>
    <div v-for="option in options" :key="option.id">
      <input 
        type="radio" 
        :id="option.id" 
        :value="option.value" 
        v-model="selectedOption" 
      />
      <label :for="option.id">{{ option.label }}</label>
    </div>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { id: 'opt1', value: 'value1', label: 'Label 1' },
        { id: 'opt2', value: 'value2', label: 'Label 2' },
      ],
    };
  },
};
</script>

处理单选按钮事件

监听 change 事件，在选中时执行自定义逻辑（如提交表单或触发方法）。

<template>
  <div>
    <input 
      type="radio" 
      value="Event Option" 
      v-model="selectedOption"
      @change="handleRadioChange"
    />
    <label>Event Option</label>
  </div>
</template>

<script>
export default {
  methods: {
    handleRadioChange() {
      console.log('Selected:', this.selectedOption);
      // 执行其他操作
    },
  },
};
</script>

使用组件库实现单选

若使用 UI 库（如 Element UI、Vuetify），可直接调用封装好的单选组件。

Element UI 示例：

<template>
  <el-radio-group v-model="selectedOption">
    <el-radio label="Option 1"></el-radio>
    <el-radio label="Option 2"></el-radio>
  </el-radio-group>
</template>

Vuetify 示例：

<template>
  <v-radio-group v-model="selectedOption">
    <v-radio label="Option A" value="A"></v-radio>
    <v-radio label="Option B" value="B"></v-radio>
  </v-radio-group>
</template>

验证单选选项

结合 Vue 的表单验证库（如 VeeValidate），确保用户必须选择一项。

<template>
  <form @submit.prevent="submitForm">
    <div v-for="option in options" :key="option.id">
      <input 
        type="radio" 
        :id="option.id" 
        :value="option.value" 
        v-model="selectedOption" 
        name="radioGroup"
        v-validate="'required'"
      />
      <label :for="option.id">{{ option.label }}</label>
    </div>
    <span v-if="errors.has('radioGroup')">必须选择一项</span>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [/* 选项数据 */],
    };
  },
  methods: {
    submitForm() {
      this.$validator.validate().then(valid => {
        if (valid) {
          // 提交逻辑
        }
      });
    },
  },
};
</script>

vue 实现单选