Vuetify.js：单击时如何更改 v-btn 组件的颜色答案

【问题标题】：Vuetify.js: How do I change color of v-btn component when clickedVuetify.js：单击时如何更改 v-btn 组件的颜色
【发布时间】：2019-11-11 20:20:09
【问题描述】：

我想在单击时更改按钮的颜色。我有两个按钮。单击一个按钮时，它分配变量“host”，单击另一个按钮时，它分配变量“guest”。

<v-btn color="primary" fab large
 @click="type='host'">
   <v-icon>home</v-icon><br/>Host
</v-btn>

<v-btn color="secondary" fab large
 @click="type='guest'">
   <v-icon>person</v-icon><br/>Request
</v-btn>

我尝试了以下方法：

冒号速记

<v-btn v-bind:style="{ color: type==='host' ? 'secondary' : 'primary' }>
<v-icon>home</v-icon>
HOST
</v-btn>

AND

<v-btn v-bind:color="{ type==='guest' ? 'secondary' : 'primary' }>   
<v-icon>person</v-icon><br/>
Request
</v-btn>

但两者都不起作用

v-btn-toggle 做不到，没有我们想要的样式（就是一个圆圈）

我是 vue.js 的新手，不知道如何调试。任何帮助将不胜感激！

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

Color 不是 CSS 属性，它是 v-btn 本身的属性，因此您可以传入任何您想要的 JS 表达式。以下应该可以工作。

<v-btn v-bind:color="type==='guest' ? 'secondary' : 'primary'>.

【讨论】：

我缺少单引号 'color' 。谢谢

【解决方案2】：

我为你准备了一个简单的fiddle。您应该使用 v-bind 绑定属性颜色：

<v-btn v-bind:color="type === 1 ? 'success' : 'error'">Success</v-btn>

【讨论】：