当前位置：首页 > VUE

vue实现单选

2026-03-07 07:58:51VUE

Vue 实现单选功能

在 Vue 中实现单选功能可以通过多种方式完成，以下是几种常见的方法：

使用 v-model 绑定单选按钮组

通过 v-model 绑定到同一个变量，确保同一时间只有一个选项被选中。选项的值会同步到绑定的变量中。

<template>
  <div>
    <input type="radio" id="option1" value="option1" v-model="selectedOption" />
    <label for="option1">Option 1</label>

    <input type="radio" id="option2" value="option2" v-model="selectedOption" />
    <label for="option2">Option 2</label>

    <input type="radio" id="option3" value="option3" v-model="selectedOption" />
    <label for="option3">Option 3</label>

    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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

动态生成单选按钮

vue实现单选

如果需要从数据中动态生成单选按钮，可以使用 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 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>

自定义单选组件

如果需要更复杂的逻辑或样式，可以封装一个自定义单选组件。

vue实现单选

<template>
  <div>
    <div 
      v-for="option in options" 
      :key="option.value" 
      @click="selectOption(option.value)"
      :class="{ active: selectedOption === option.value }"
    >
      {{ option.label }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selectedOption: this.value
    };
  },
  methods: {
    selectOption(value) {
      this.selectedOption = value;
      this.$emit('input', value);
    }
  },
  watch: {
    value(newVal) {
      this.selectedOption = newVal;
    }
  }
};
</script>

<style scoped>
.active {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}
</style>

使用第三方库

如果需要更丰富的功能或样式，可以使用第三方库如 Element UI、Vuetify 或 Ant Design Vue 提供的单选组件。

以 Element UI 为例：

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

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