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

Posted 2023-03-07

【中文标题】如何在多个按钮Vue中更改一个按钮的颜色

【英文标题】：How to change color one button in many button 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 顺风

【参考方案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>