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前要加一个空格（必须有），字符串拼接时，两个字符串之间要有空格

 

标签：常用,vue,空格,类名,字符串,三元,class,classify
来源： https://www.cnblogs.com/ll15888/p/11506769.html