如何在多个按钮Vue中改变一个按钮的颜色

Question

我只想更改 5 个按钮中选择的 1 个按钮的颜色。

<button
      class="hover:bg-brand-blue  hover:text-white focus:bg-brand-blue focus:text-white"
      @click="say(item.message)"
    >
      <span class="text-sm ">{{ item.message }}</span>
 </button>

在数据中

data() {
return {
  reason: '',
  items: [
    { message: '1' },
    { message: '2' },
    { message: '3' },
    { message: '4' },
    { message: '5' }
  ]
};

},

在 js 中

methods: {
say: function(message) {
  this.reason = message;
},

当我选择颜色并更改时，但是当我将文本放入文本区域时，所选按钮颜色消失了。我使用 css 顺风

Answer 1

您可以使用 class 绑定来实现：https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax

new Vue({
  el: "#app",
  data() {
    return {
      reason: '',
      items: [
        { message: '1' },
        { message: '2' },
        { message: '3' },
        { message: '4' },
        { message: '5' }
      ]
    }
  },
  methods: {
    say: function(message) {
      this.reason = message;
    }
  }
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button
    v-for="item in items"
    :key="item.message"
    class="bg-blue-400 hover:bg-blue-500 px-6 py-2 rounded border m-2"
    :class="{
      'bg-blue-900': item.message === reason
    }"
    @click="say(item.message)"
  >
    <span class="text-sm ">{{ item.message }}</span>
 </button>
</div>

如何在多个按钮Vue中改变一个按钮的颜色

How to change color one button in many button Vue

html

javascript

css

vue.js

tailwind-css