当前位置：首页 > VUE

vue实现radio

2026-01-07 21:53:36VUE

Vue 实现 Radio 按钮

在 Vue 中实现 Radio 按钮可以通过 v-model 进行数据绑定，结合 input 元素的 type="radio" 属性。以下是一个基本示例：

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

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

动态生成 Radio 按钮

如果需要动态生成 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 option: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' },
        { value: 'option3', label: 'Option 3' }
      ]
    }
  }
}
</script>

使用组件封装 Radio 按钮

可以将 Radio 按钮封装为可复用的组件：

<template>
  <div>
    <RadioGroup v-model="selectedOption" :options="options" />
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

<script>
import RadioGroup from './RadioGroup.vue'

export default {
  components: { RadioGroup },
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'option1', label: 'Option 1' },
        { value: 'option2', label: 'Option 2' }
      ]
    }
  }
}
</script>

RadioGroup.vue 文件内容：

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input type="radio" :value="option.value" @change="$emit('input', $event.target.value)" :checked="value === option.value" />
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  props: {
    value: String,
    options: Array
  }
}
</script>

使用第三方库

如果需要更复杂的 Radio 按钮功能，可以使用第三方库如 element-ui 或 vuetify：

使用 element-ui 的 Radio 组件：

<template>
  <el-radio-group v-model="selectedOption">
    <el-radio v-for="option in options" :key="option.value" :label="option.value">
      {{ option.label }}
    </el-radio>
  </el-radio-group>
</template>

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

样式定制

可以通过 CSS 自定义 Radio 按钮的样式：

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

<style>
.radio-input {
  display: none;
}

.radio-custom {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
}

.radio-input:checked + .radio-custom {
  border-color: #409eff;
}

.radio-input:checked + .radio-custom::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  background: #409eff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
}
</style>

vue实现radio