当前位置：首页 > VUE

vue如何实现单选

2026-03-28 08:35:02VUE

实现单选功能的几种方法

在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>
    <input type="radio" id="option3" value="option3" v-model="selectedOption">
    <label for="option3">选项3</label>
    <p>已选择: {{ selectedOption }}</p>
  </div>
</template>

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

使用v-for动态生成单选框

当选项较多时，可以使用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: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ]
    }
  }
}
</script>

使用组件实现单选功能

可以创建一个可复用的单选组件，提高代码的可维护性。

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

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      internalValue: this.value
    }
  },
  watch: {
    value(newVal) {
      this.internalValue = newVal
    }
  }
}
</script>

使用第三方UI库

许多UI库如Element UI、Vuetify等提供了现成的单选组件，可以直接使用。

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 label="option3">选项3</el-radio>
  </el-radio-group>
</template>

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