当前位置：首页 > VUE

vue 实现单选功能

2026-01-16 01:51:39VUE

实现单选功能的方法

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

使用原生HTML单选按钮

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

<template>
  <div>
    <label>
      <input type="radio" v-model="selectedOption" value="option1">
      Option 1
    </label>
    <label>
      <input type="radio" v-model="selectedOption" value="option2">
      Option 2
    </label>
    <label>
      <input type="radio" v-model="selectedOption" value="option3">
      Option 3
    </label>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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

使用组件库的单选组件

许多UI组件库（如Element UI、Vuetify等）提供了封装好的单选组件：

<template>
  <div>
    <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>
    <p>Selected option: {{ selectedOption }}</p>
  </div>
</template>

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

自定义单选按钮样式

如果需要自定义单选按钮样式，可以隐藏原生输入框，通过CSS控制显示状态：

<template>
  <div>
    <div class="radio-group">
      <label
        v-for="option in options"
        :key="option.value"
        :class="{ active: selectedOption === option.value }"
        @click="selectedOption = 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>

<style>
.radio-group label {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #ccc;
  margin-right: 5px;
  cursor: pointer;
}
.radio-group label.active {
  background-color: #409eff;
  color: white;
}
</style>

动态生成单选选项

当选项来自API或需要动态生成时：

vue 实现单选功能

<template>
  <div>
    <label v-for="item in items" :key="item.id">
      <input
        type="radio"
        v-model="selectedItem"
        :value="item.id"
      >
      {{ item.name }}
    </label>
    <p>Selected item ID: {{ selectedItem }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: null,
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  }
}
</script>

这些方法涵盖了从简单到复杂的单选功能实现，可以根据具体需求选择适合的方式。