如果使用Vue js激活或选择按钮，如何更改按钮颜色答案

【问题标题】：How to change button color if button active or selected using Vue js如果使用Vue js激活或选择按钮，如何更改按钮颜色
【发布时间】：2021-10-04 06:54:25
【问题描述】：

如果按钮处于活动状态或被选中，我想更改按钮颜色。

这是我的代码：

模板

<template>
  <div id="app">
    <div>
      <button
        class="btn btn-primary mb-3"
        @click="btnBlue()"
      >
        Blue
      </button>
      <button
        class="btn btn-warning text-white mx-3 mb-3"
        @click="btnYellow()"
      >
       Yellow
      </button>
    </div>
    <div>
      <span
        class="btn-map"
        v-for="(item, index) in new Array(data.length)"
        :key="index"
      >
        <button
          class="btn btn-outline-primary"
          :class="{ active: index + 1 === activeButton }"
          :style="{ 'background-color': color}"
          @click="setActive(index)"
        >
          {{ index + 1 }}
        </button>
      </span>
    </div>
  </div>
</template>

脚本

<script>
export default {
  name: 'App',
  data() {
    return {
      data: [ 1, 2, 3, 4, 5],
      color: "",
      activeButton: 0
    }
  },
  methods: {
    setActive(index) {
      this.activeButton = index + 1;
    },
    btnBlue() {
      this.color = '#039BE5';
    },
    btnYellow() {
      this.color = '#f3b808';
    }
  }
}
</script>

这是：demo link

如果单击blue 按钮，我想更改按钮颜色，我只想将选定的活动按钮颜色更改为blue 而不是所有按钮。如果我单击yellow 按钮，我只希望选定的活动按钮颜色更改为yellow，而不是所有按钮，如果没有选择按钮，则单击按钮blue 或yellow，我不想改变颜色。所以颜色只会在选中或激活的按钮上改变，如果没有按钮被选中或激活，颜色不会改变。

请帮助我仅在选定的活动按钮上更改颜色按钮。谢谢。

【问题讨论】：

标签： javascript vue.js button colors

【解决方案1】：

你的意思是这样的吗？

Vue.createApp({
  data() {
    return {
      data: [ 1, 2, 3, 4, 5],
      color: "",
      activeButton: 0
    }
  },
  methods: {
    setActive(index) {
      this.activeButton = index + 1;
    },
    btnBlue() {
      this.color = '#039BE5';
    },
    btnYellow() {
      this.color = '#f3b808';
    }
  }
}).mount('#demo')

<script src="https://unpkg.com/vue@next"></script>

<div id="demo">
    <div>
      <button
        class="btn btn-primary mb-3"
        @click="btnBlue()"
      >
        Blue
      </button>
      <button
        class="btn btn-warning text-white mx-3 mb-3"
        @click="btnYellow()"
      >
       Yellow
      </button>
    </div>
    <div>
      <span
        class="btn-map"
        v-for="(item, index) in new Array(data.length)"
        :key="index"
      >
        <button
          class="btn btn-outline-primary"
          :style="{'background-color': activeButton === index + 1 ? color : ''}"
          @click="setActive(index)"
        >
          {{ index + 1 }}
        </button>
      </span>
    </div>
</div>

我刚刚在您的v-for 中添加了一个条件：

:style="{'background-color': activeButton === index + 1 ? color : ''}"

所以如果 index+1 的按钮与 activeButton 匹配，则将使用变量 color，否则将不应用任何颜色。

【讨论】：