当前位置：首页 > VUE

vue如何实现单选

2026-01-14 05:47:11VUE

使用原生 HTML 单选按钮

在 Vue 中可以直接使用 HTML 的原生单选按钮，通过 v-model 绑定数据。

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

使用 Vue 组件库（如 Element UI）

若使用 Element UI 等组件库，可直接调用其封装好的单选组件。

<template>
  <div>
    <el-radio v-model="selectedOption" label="Option 1">Option 1</el-radio>
    <el-radio v-model="selectedOption" label="Option 2">Option 2</el-radio>
    <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.value">
      <input 
        type="radio" 
        :id="option.value" 
        :value="option.value" 
        v-model="selectedOption" 
      />
      <label :for="option.value">{{ option.label }}</label>
    </div>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

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

自定义单选组件

封装可复用的单选组件，适合项目中频繁使用单选的场景。

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

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

<!-- Parent.vue -->
<template>
  <RadioGroup 
    v-model="selectedOption" 
    :options="[
      { value: 'X', label: 'Custom X' },
      { value: 'Y', label: 'Custom Y' }
    ]" 
  />
  <p>Selected: {{ selectedOption }}</p>
</template>

<script>
import RadioGroup from './RadioGroup.vue'
export default {
  components: { RadioGroup },
  data() {
    return {
      selectedOption: ''
    }
  }
}
</script>

vue如何实现单选