vue 绑定class问题

Question

需求是小按钮的背景色默认值灰色的，点击时候需要跟大按钮的背景色一致。点击哪个哪个绑定class。现在的问题是默认就有颜色了。

代码如下，kongTou 是布尔类型：
大按钮标签：

<el-button class = "high-light" :class="{active: isActive == 'in'}" @click="select('in')">多头</el-button>
<el-button class = "high-light" :class="{activeRed: isActive == 'out'}" @click="select('out')">空头</el-button>

小按钮标签：

<p>开仓方向</p>
<p style = "margin-top: -0.06rem;">
    <span style = "margin-right: 0.1rem;" :class="kongTou ? 'color-green' : 'color-red'">{{kongTou ? '多头' : '空头'}}</span>
    <el-button :class="kongTou ? 'bgGreen' : 'bgRed'"  @click="selected('a')">10X</el-button>
    <el-button :class="kongTou ? 'bgGreen' : 'bgRed'"  @click="selected('b')">20X</el-button>
</p>

Answer 1

已经解决了。
HTML：
<el-button class = "high-light" :class="kongTou ? {bgGreen: isBg == 'a'} : {bgRed: isBg == 'a'}" @click="selected('a')">10X</el-button>
<el-button class = "high-light" :class="kongTou ? {bgGreen: isBg == 'b'} : {bgRed: isBg == 'b'}" @click="selected('b')">20X</el-button>

JS：
selected(x){

this.isBg = x;

},

这样写就可以啦

Answer 2

感觉你想复杂了。
你直接单击的时候添加一个循环，先消掉所有按钮的颜色，然后给单击的对象添加上你需要的颜色，小按钮同理

Answer 3

你这个逻辑要不是绿色要不是红色的

<p>开仓方向</p>
<p style = "margin-top: -0.06rem;">
    <span style = "margin-right: 0.1rem;" :class="kongTou ? 'color-green' : 'color-red'">{{kongTou ? '多头' : '空头'}}</span>
    <el-button :class="selectA ? (kongTou ? 'bgGreen' : 'bgRed')" @click="selected('a')">10X</el-button>
    <el-button :class="selectB ? (kongTou ? 'bgGreen' : 'bgRed')"  @click="selected('b')">20X</el-button>
</p>

还应该加上是否选中的条件判断