当前位置：首页 > VUE

vue实现radio

2026-03-27 17:17:27VUE

实现基础 Radio 单选功能

使用 v-model 绑定单选值，通过 value 属性设置选项值。

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

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

动态渲染 Radio 选项

通过 v-for 动态生成选项列表，适合从接口获取数据。

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

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'a', label: 'Option A' },
        { value: 'b', label: 'Option B' }
      ]
    };
  }
};
</script>

使用组件库（如 Element UI）

若使用 Element UI，可直接调用 el-radio 组件简化样式和逻辑。

<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-group>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

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

自定义 Radio 样式

通过隐藏原生 <input> 并设计 <label> 样式实现自定义外观。

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

<style>
.radio-input { display: none; }
.radio-label {
  padding: 8px 16px;
  border: 1px solid #ccc;
  cursor: pointer;
}
.radio-input:checked + .radio-label {
  background: #42b983;
  color: white;
}
</style>

表单验证集成

结合 Vuelidate 或原生验证逻辑，确保必选项已填写。

vue实现radio

<template>
  <div>
    <label>
      <input type="radio" v-model="selectedOption" value="agree" required> 
      I agree
    </label>
    <button @click="submit" :disabled="!selectedOption">Submit</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    };
  },
  methods: {
    submit() {
      if (this.selectedOption) {
        console.log('Form submitted');
      }
    }
  }
};
</script>