当前位置：首页 > VUE

vue 点击实现单选

2026-02-20 05:29:57VUE

实现 Vue 中的单选功能

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

方法一：使用 v-model 绑定单选值

通过 v-model 绑定一个变量，点击时更新该变量的值。

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

<script>
export default {
  data() {
    return {
      selected: null,
      options: [
        { value: 'A', label: 'Option A' },
        { value: 'B', label: 'Option B' },
        { value: 'C', label: 'Option C' }
      ]
    }
  }
}
</script>

<style>
.active {
  background-color: #eee;
}
</style>

方法二：使用 v-model 结合 <input type="radio">

vue 点击实现单选

利用原生单选按钮的特性实现单选。

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input 
        type="radio" 
        v-model="selected" 
        :value="option.value"
      >
      {{ option.label }}
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: null,
      options: [
        { value: 'A', label: 'Option A' },
        { value: 'B', label: 'Option B' },
        { value: 'C', label: 'Option C' }
      ]
    }
  }
}
</script>

方法三：使用自定义组件

封装一个可复用的单选组件。

vue 点击实现单选

<template>
  <div>
    <RadioGroup v-model="selected" :options="options" />
  </div>
</template>

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

export default {
  components: { RadioGroup },
  data() {
    return {
      selected: null,
      options: [
        { value: 'A', label: 'Option A' },
        { value: 'B', label: 'Option B' },
        { value: 'C', label: 'Option C' }
      ]
    }
  }
}
</script>

在 RadioGroup.vue 中：

<template>
  <div>
    <div 
      v-for="option in options" 
      :key="option.value"
      @click="$emit('update:modelValue', option.value)"
      :class="{ active: modelValue === option.value }"
    >
      {{ option.label }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    modelValue: [String, Number],
    options: Array
  }
}
</script>

方法四：使用计算属性

通过计算属性动态判断选中状态。

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

<script>
export default {
  data() {
    return {
      selected: null,
      options: [
        { value: 'A', label: 'Option A' },
        { value: 'B', label: 'Option B' },
        { value: 'C', label: 'Option C' }
      ]
    }
  },
  methods: {
    selectOption(value) {
      this.selected = value
    },
    isSelected(value) {
      return this.selected === value
    }
  }
}
</script>