小编Gio*_*ois的帖子

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

我想在单击时更改按钮的颜色。我有两个按钮。当一个按钮被点击时,它分配变量“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>
Run Code Online (Sandbox Code Playgroud)

我尝试了以下方法:

  1. 冒号速记
<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>
Run Code Online (Sandbox Code Playgroud)

但两者都不起作用

  1. v-btn-toggle 没有完成工作并且没有我们想要的样式(这是一个圆圈)

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

vue.js vuetify.js

3
推荐指数
1
解决办法
1万
查看次数

标签 统计

vue.js ×1

vuetify.js ×1