如果按钮处于活动状态或使用 Vue js 选择，如何更改按钮颜色

Question

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

这是我的代码：

模板

<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，我希望没有颜色改变。因此，颜色仅在选定或激活的按钮上发生变化，如果没有按钮被选中或激活，则颜色不会改变。

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

Answer 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 : ''}"

因此，如果索引为 +1 的按钮与 activeButton 匹配，将使用变量 color，否则将不应用任何颜色。

如果按钮处于活动状态或使用 Vue js 选择，如何更改按钮颜色

How to change button color if button active or selected using Vue js

javascript

colors

button

vue.js