如何在点击 v-bottom-nav 时更改 v-btn 的背景颜色答案

【问题标题】：How do I change the background color of v-btn on click inside v-bottom-nav如何在点击 v-bottom-nav 时更改 v-btn 的背景颜色
【发布时间】：2019-11-24 08:19:45
【问题描述】：

我想在 v-bottom-nav 内单击按钮时将 v-btn 的背景颜色更改为黑色。

我已经试过了，但是没用

<v-btn
    :color="changeBackgroundColor ? 'secondary' : 'info'"
    @click="changeBackgroundColor = !changeBackgroundColor"
>

我的代码在https://codepen.io/boidurja-talukdar/pen/ZddywR?editors=1010

我希望按钮“A”的背景颜色在单击时从蓝色切换为黑色。但实际结果是按钮“A”上的文字在点击时消失了。

【问题讨论】：

标签： vuetify.js

【解决方案1】：

您可以使用样式绑定来做到这一点...检查这个 fork codepen

   <v-btn
       @click="changeBackgroundColor = !changeBackgroundColor"
       :style="{
           backgroundColor : changeBackgroundColor ? 'black !important' : '',
           color: changeBackgroundColor ? 'white !important' : 'black'
           }"
   >

【讨论】：

再次感谢您的回答。