vue中的常用三元

點擊事件的三元

<el-button type="primary" @click="edit == 'mod' ? sureModify() : submit()" style='margin-right:30px;'>提 交</el-button>

 

購物車按鈕的三元

<div  bindtap="pay">{{edit ? '刪除' : '去結算'}}</div>

綁定內聯樣式的三元

<div :style="{disabled:!amendPhoneIsShow?'':'disabled'}"></div>

<p :style="{'color': (checkIndex3==m.txt ? '#3d8cff':'#BBBBBB')}">{{m.txt}}</p>

綁定class樣式

<i class="iconfont "  :class="[isShow=='password'?'icon-kejian':'icon-bukejian']"></i>

<div :class='["classify",current=="0" ? "active" : ""]'  @click='current=0'>點我改變</div>

注意：數組中的classify如果不加引號的話，代表的是data中的一項，並不是類名，將classify加上雙引號，變成字符串就可以變成類名

 

還可以通過字符串拼接，在第二個class的前面加個空格

<div :class="'classify'+(current=='0'?' active':'')"  @click='current=0'>點我改變</div>

注意：active前要加一個空格（必須有），字符串拼接時，兩個字符串之間要有空格