Question

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

<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中的newby，不知道如何调试它。任何帮助将不胜感激！

Answer 1

颜色不是CSS属性，而是v-btn本身的属性，因此您可以传入所需的任何JS表达式。以下可能应该起作用。

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

Answer 2

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

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

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

2 个答案: