1、數(shù)組形式
<div :class='["classify",current=="0" ? "active" : ""]' @click='current=0'>注意：數(shù)組中的classify如果不加引號的話，代表的是data中的一項，并不是類名，將classify加上雙引號，變成字符串就可以變成類名
2、字符串拼接
<div :class="'classify'+(current=='0'?' active':'')" @click='current=0'>課程</div>注意：active前要加一個空格（必須有），字符串拼接時，兩個字符串之間要有空格
3. 綁定對象
通常給class綁定個對象，就可以動態(tài)的切換樣式了。(data中定義isActive的true、false)
<div :class="{ active: isActive }">hello</div> handleClick(){ this.isActive = !this.isActive }
<i class="iconfont " :class="[current=='0'?'class1':'class2']"></i>推薦、不加{}就算是加字符串,最好綁定class用[]、{判斷},style用{}
<span v-bind:style="{display:isActive ? 'block':'none'}">hello</span>
<div :style="{width:width,height:height}"></div>
注意:v-bind:style="{樣式名:‘樣式值’}" 必須是字符串形式
4.數(shù)組形式
`<div :class=’[“classify”,current==“0” ? “active” : “”]’ @click=‘current=0’>注意：數(shù)組中的classify如果不加引號的話，代表的是data中的一項，并不是類名，將classify加上雙引號，變成字符串就可以變成類名
5.數(shù)據(jù)標(biāo)記
`<div :class=’[“classify”,current==“0” ? “active” : “”]’ @click=‘current=0’><button class="tk" v-show="(active==0 || active==1) || active==2">退款</button>文章來源：http://www.zghlxwxcb.cn/news/detail-544807.html
6.多個判斷值文章來源地址http://www.zghlxwxcb.cn/news/detail-544807.html
{{item.biddingState==0?'報名中' : item.biddingState==1?'即將競投': item.biddingState==2?'正在競投':item.biddingState==3?'結(jié)束競投':'競投異常'}}到了這里，關(guān)于vue中的三元表達式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
