当前位置：首页 > VUE

vue实现单选选中变色

2026-02-25 01:16:51VUE

实现单选选中变色的方法

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

方法一：使用v-model绑定和动态class

通过v-model绑定单选按钮的值，结合动态class根据选中状态改变样式。

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

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

<style>
.active {
  background-color: #42b983;
  color: white;
}
</style>

方法二：使用计算属性

通过计算属性判断当前是否选中，返回对应的样式类名。

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

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ]
    }
  },
  methods: {
    getClass(value) {
      return this.selectedOption === value ? 'active' : ''
    }
  }
}
</script>

方法三：使用CSS伪类选择器

利用CSS的:checked伪类选择器直接样式化选中的单选按钮。

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

<style>
.radio-input:checked + span {
  background-color: #42b983;
  color: white;
}
</style>

方法四：使用Vue的样式绑定

通过Vue的样式绑定直接修改元素的样式属性。

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

<script>
export default {
  data() {
    return {
      selectedOption: '',
      activeStyle: {
        backgroundColor: '#42b983',
        color: 'white'
      },
      options: [
        { value: 'option1', label: '选项1' },
        { value: 'option2', label: '选项2' },
        { value: 'option3', label: '选项3' }
      ]
    }
  }
}
</script>