vue单选按钮,选中如何改变其当前按钮颜色

针对“vue单选按钮,选中如何改变其当前按钮颜色”的问题，我们可以采用下面两种方式进行实现：

方式一

前置条件

• 首先要确保页面中引入了Vue框架

实现步骤

1. 定义一个data属性selected，用来记录当前选中的单选按钮
2. 设置对应的CSS样式，例如selected的值为true时，改变按钮背景色等样式
3. 将按钮的v-model值设置为selected，用来绑定数据与单选按钮
4. 使用v-for循环遍历数据，动态生成单选按钮列表

代码示例：

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

<script>
export default {
  data() {
    return {
      selected: '',
      options: [
        {
          label: '选项一',
          value: '1'
        },
        {
          label: '选项二',
          value: '2'
        },
        {
          label: '选项三',
          value: '3'
        }
      ]
    }
  }
}
</script>

<style>
  input[type="radio"]:checked + label {
    background-color: orange;
  }
</style>

方式二

前置条件

• 首先要确保页面中引入了Vue框架

实现步骤

1. 在单选按钮中使用v-bind:class绑定类名，并使用三元表达式判断当前是否选中
2. 定义CSS样式类，设置不同状态下的样式

代码示例：

<template>
  <div>
    <label>
      <input type="radio" v-model="selected" value="Option A" />
      <span v-bind:class="{ checked: selected === 'Option A' }">Option A</span>
    </label>

    <label>
      <input type="radio" v-model="selected" value="Option B" />
      <span v-bind:class="{ checked: selected === 'Option B' }">Option B</span>
    </label>

    <label>
      <input type="radio" v-model="selected" value="Option C" />
      <span v-bind:class="{ checked: selected === 'Option C' }">Option C</span>
    </label>
  </div>
</template>

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

<style>
span.checked {
  background-color: orange;
}
</style>

使用上述两种方式，就可以实现根据单选按钮的选中状态来改变颜色的效果了。