vue style class 動態綁定

v-class 動態綁定

通常給class綁定個對象，就可以動態的切換樣式了。(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="{樣式名:'樣式值'}" 必須是字符串形式
 
數組形式：
<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>