Vue style、class 内联三元表达式

 转自：http://yaohuitao.com/?p=379

转自：vue中一个标签中含有多个class（其中包含三元表达式）的写法_小地瓜呱的博客-优快云博客

转自：vue中，class、内联style绑定、computed属性【图文】_邹君安_51CTO博客

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

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

vue html模板渲染 简写

<p>{{objData.name || "-"}}</p>

取值：

this.status = res.data.status || null;//这种要注意status == 0的情况, 为0会走null
this.time = res.data.time || "";

字符串、对象、数组形式三元

字符串
:type="i == 0 ? 'success' : ''"

对象
:style="{display:isActive ? 'block':'none'}"
:style="{'margin-right': isActive ? '100px' : '' }"
:class="{'active':n == i}"

数组
:class="['classify',current=='0' ? 'active' : '']"

点击事件三元、v-for 三元

<!--Vue 小程序都可以三元事件 事件() 括号一定要加！！！-->
<el-button type="primary" @click="edit == 'mod' ? sureModify() : submit()">提 交</el-button>

购物车按钮的三元

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

v-for 三元

<li v-for ="item in condition?likelist:likelist2" :key="i">
     <img :src="item.img" alt="">
     <p>{{item.title}}</p>
 </li>

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>