需求是小按鈕的背景色默認值灰色的,點擊時候需要跟大按鈕的背景色一致。點擊哪個哪個綁定class?,F在的問題是默認就有顏色了。代碼如下,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>
2 回答
翻翻過去那場雪
TA貢獻2065條經驗 獲得超14個贊
已經解決了。
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;
},
這樣寫就可以啦
浮云間
TA貢獻1829條經驗 獲得超4個贊
你這個邏輯要不是綠色要不是紅色的
<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>添加回答
舉報
0/150
提交
取消
