在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue 綁定class問題

vue 綁定class問題

需求是小按鈕的背景色默認(rèn)值灰色的，點(diǎn)擊時(shí)候需要跟大按鈕的背景色一致。點(diǎn)擊哪個(gè)哪個(gè)綁定class?，F(xiàn)在的問題是默認(rèn)就有顏色了。
clipboard.png

clipboard.png
代碼如下，kongTou 是布爾類型：
大按鈕標(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>開倉方向</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>
回答
編輯回答
單眼皮

你這個(gè)邏輯要不是綠色要不是紅色的

<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>

還應(yīng)該加上是否選中的條件判斷

2017年3月5日 10:13
編輯回答
硬扛

已經(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;

},

這樣寫就可以啦

2018年8月15日 06:08
編輯回答
來守候

感覺你想復(fù)雜了。
你直接單擊的時(shí)候添加一個(gè)循環(huán)，先消掉所有按鈕的顏色，然后給單擊的對(duì)象添加上你需要的顏色，小按鈕同理

2017年12月13日 04:23