vue中一个标签中含有多个class（其中包含三元表达式）的写法

转自：Vue style、class 内联三元表达式_林中明月间丶-CSDN博客

三个条件判断： 1=>  101=色卡、2=>102=板布、3=>103=大货

let type = that.orderType == '1' ? '101': (that.orderType == '2' ? '102' : '103')

点击事件三元：

1. <el-button type="primary" @click="edit == 'mod' ? sureModify() : submit()">提 交</el-button>

3. 购物车按钮的三元

5. <div bindtap="pay">{{edit ? '删除' : '去结算'}}</div>

style写多个样式

:style="{left: 390 + 'px',color: brandnamesum == 16 ? 'red' : ''}"

通常给class绑定个对象，就可以动态的切换样式了。(data中定义isActive的true、false)
<div :class="{'active':isActive==-1}">hello</div>
<div :class="{ active: isActive }">hello</div>
handleClick(){ this.isActive = !this.isActive }
 
若要绑定多个class，需要逗号隔开就行：（这里的activeTwo加不加引号都可以，也一样都能渲染，如下）
<div class="activeOne" v-bind:class="{ activeTwo: isActive, 'activeThree': hasError }"></div>
 
<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="{样式名:'样式值'}" 必须是字符串形式
 
 
数组形式：
<div :class="['classify',current=='0' ? 'active' : '']"  @click='current=0'>xx</div>
<div :class="['classify', isActive? 'active' : '']">xx</div>
 
注意：数组中的classify如果不加引号的话，代表的是data中的一项，并不是类名，将classify加上双引号，变成字符串就可以变成类名
 
字符串拼接：
<div :class="'classify'+(current=='0'?' active':'')"  @click='current=0'>xx</div>
注意：active前要加一个空格（必须有），字符串拼接时，两个字符串之间要有空格
 
<button class="tk" v-show="(active==0 || active==1) || active==2">退款</button>