将类/样式添加到 VueJS 中的活动按钮

【问题标题】：Add class/style to active button in VueJS将类/样式添加到 VueJS 中的活动按钮
【发布时间】：2021-05-30 12:53:40
【问题描述】：

这与路由器菜单无关。

我有一个由 3 个子表组成的价格表。

在单个可见工作表上方是 3 个按钮，单击这些按钮会显示相应的工作表。

The design of the pricesheet

我查看了 Vue 样式绑定，但它们仅在 True / False 上触发，而不是在单个变量的值上触发。

当然可以选择为每个按钮设置一个 data() 变量，并在更改时将其他两个设置为 false，但也许有办法将重复的代码带到单个变量中？

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

事实证明它不仅适用于真假。

例如：

我的数据表明第一个按钮处于活动状态：

data() {
    return {
        activeBtn: 1,
    };
},

要将样式绑定到活动按钮，只需将样式属性设置为 if 简写，它会检查数据的值并更改字符串类型的样式。

<div class="btn1" v-bind:style="{ backgroundColor: activeBtn == 1 ? 'red' : 'green' }"></div>
<div class="btn2" v-bind:style="{ backgroundColor: activeBtn == 2 ? 'red' : 'green' }"></div>
<div class="btn3" v-bind:style="{ backgroundColor: activeBtn == 3 ? 'red' : 'green' }"></div>

Screenshot with the styling like in the code

当然最好不要指定样式而是指定类（对于多个样式值）

【讨论】：