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

【问题标题】：How to change color one button in many button Vue如何在多个按钮Vue中更改一个按钮的颜色
【发布时间】：2021-05-14 06:52:44
【问题描述】：

我只想更改 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;
},

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

【问题讨论】：

标签： javascript html css vue.js tailwind-css

【解决方案1】：

您可以使用类绑定来实现：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>

【讨论】：