当前位置：首页 > VUE

vue 实现单选功能

2026-03-08 15:10:59VUE

实现单选功能的几种方法

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

使用原生HTML单选按钮

通过v-model绑定数据，利用原生<input type="radio">实现单选：

vue 实现单选功能

<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>
  </div>
</template>

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

使用Vue组件库的单选组件

如Element UI的el-radio组件：

vue 实现单选功能

<template>
  <el-radio-group v-model="selectedOption">
    <el-radio label="option1">选项1</el-radio>
    <el-radio label="option2">选项2</el-radio>
  </el-radio-group>
</template>

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

自定义单选组件

通过动态样式和事件处理实现自定义外观的单选功能：

<template>
  <div class="custom-radio">
    <div 
      v-for="option in options" 
      :key="option.value"
      class="radio-item"
      :class="{ 'active': selectedOption === option.value }"
      @click="selectedOption = option.value"
    >
      {{ option.label }}
    </div>
  </div>
</template>

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

<style>
.radio-item {
  padding: 8px 12px;
  border: 1px solid #ddd;
  cursor: pointer;
}
.radio-item.active {
  background-color: #409eff;
  color: white;
}
</style>

使用计算属性处理单选逻辑

当需要根据单选结果执行复杂逻辑时：

<template>
  <div>
    <input type="radio" v-model="selectedOption" value="A">选项A
    <input type="radio" v-model="selectedOption" value="B">选项B
    <p>{{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    }
  },
  computed: {
    result() {
      return this.selectedOption === 'A' ? '选择了A' : '选择了B'
    }
  }
}
</script>