当前位置：首页 > VUE

vue实现单选的功能

2026-02-22 06:18:23VUE

实现单选功能的方法

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

使用原生HTML单选按钮

通过v-model绑定数据，结合value属性实现单选：

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>

使用组件库的单选组件

例如使用Element UI的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>

自定义单选组件

创建一个可复用的单选组件：

<!-- RadioButton.vue -->
<template>
  <div class="radio-button" :class="{ 'active': isActive }" @click="selectOption">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true
    },
    modelValue: {
      type: String,
      default: ''
    }
  },
  computed: {
    isActive() {
      return this.modelValue === this.value
    }
  },
  methods: {
    selectOption() {
      this.$emit('update:modelValue', this.value)
    }
  }
}
</script>

<style scoped>
.radio-button {
  padding: 8px 16px;
  border: 1px solid #ccc;
  cursor: pointer;
}
.active {
  background-color: #409eff;
  color: white;
}
</style>

在父组件中使用自定义单选组件

<template>
  <div>
    <RadioButton v-model="selectedOption" value="option1">选项1</RadioButton>
    <RadioButton v-model="selectedOption" value="option2">选项2</RadioButton>
  </div>
</template>

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

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