需求是小按鈕的背景色默認(rèn)值灰色的，點(diǎn)擊時(shí)候需要跟大按鈕的背景色一致。點(diǎn)擊哪個(gè)哪個(gè)綁定class。現(xiàn)在的問(wèn)題是默認(rèn)就有顏色了。代碼如下，kongTou 是布爾類(lèi)型：大按鈕標(biāo)簽：<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>小按鈕標(biāo)簽：<p>開(kāi)倉(cāng)方向</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>
2 回答
翻翻過(guò)去那場(chǎng)雪
TA貢獻(xiàn)2065條經(jīng)驗(yàn) 獲得超14個(gè)贊
已經(jīng)解決了。
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;
},
這樣寫(xiě)就可以啦
浮云間
TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超4個(gè)贊
你這個(gè)邏輯要不是綠色要不是紅色的
<p>開(kāi)倉(cāng)方向</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>添加回答
舉報(bào)
0/150
提交
取消