vue動態綁定類樣式ClassName知多少

對於動態綁定類樣式，以前用的最多的也就是：class="{'classA':true}" ，今天遇到一種狀況，就是要給元素動態添加一個保存在數據源中的類樣式，那前邊的這種寫法顯然知足不了。

想起以前微信小程序中動態添加類樣式的方式是這樣的 class='item good {{isEdit?"isEdit":""}}'，那麼vue中應該也有一種寫法可以同時添加指定類樣式與數據源中的類樣式。

而後就去查了些資料作了下整理，彙總了下vue中動態添加類樣式多種用法：

一. 綁定字符串（不建議使用）

<div :class=" 'classA classB' ">Demo1</div>

二. 綁定數據變量：

<div :class="classA">Demo2</div>

data: {
  classA: 'class-a'  //當classA改變時將更新class
}

寫在指令中的值會被視做表達式，如javascript表達式，所以v-bind:class接受三目運算：

<div :class="classA ? 'class-a' : 'class-b' ">Demo3</div>

三. 綁定對象：

<div :class="{ 'class-a': true, 'class-b': false}">Demo4</div>

四. 綁定數組：

<div :class="[classA, classB]">Demo7</div>

對於綁定 數組這種用法，拓展性就比較大了，能夠綜合上邊多種組合使用，以下：

<li v-for="item in navData" :class="[{'layui-this':currentRouter==item.router},item.class]" >