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&nbsp;=&nbsp;x;},这样写就可以啦

Answer 2

你这个逻辑要不是绿色要不是红色的<p>开仓方向</p><p&nbsp;style&nbsp;=&nbsp;"margin-top:&nbsp;-0.06rem;"> &nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;style&nbsp;=&nbsp;"margin-right:&nbsp;0.1rem;"&nbsp;:class="kongTou&nbsp;?&nbsp;'color-green'&nbsp;:&nbsp;'color-red'">{{kongTou&nbsp;?&nbsp;'多头'&nbsp;:&nbsp;'空头'}}</span> &nbsp;&nbsp;&nbsp;&nbsp;<el-button&nbsp;:class="selectA&nbsp;?&nbsp;(kongTou&nbsp;?&nbsp;'bgGreen'&nbsp;:&nbsp;'bgRed')"&nbsp;@click="selected('a')">10X</el-button> &nbsp;&nbsp;&nbsp;&nbsp;<el-button&nbsp;:class="selectB&nbsp;?&nbsp;(kongTou&nbsp;?&nbsp;'bgGreen'&nbsp;:&nbsp;'bgRed')"&nbsp;&nbsp;@click="selected('b')">20X</el-button></p>