對(duì)于動(dòng)態(tài)綁定類樣式，之前用的最多的也就是：class="{'classA':true}" ，今天遇到一種情況，就是要給元素動(dòng)態(tài)添加一個(gè)保存在數(shù)據(jù)源中的類樣式，那前邊的這種寫(xiě)法顯然滿足不了。

想起之前微信小程序中動(dòng)態(tài)添加類樣式的方式是這樣的?class='item good {{isEdit?"isEdit":""}}'，那么vue中應(yīng)該也有一種寫(xiě)法能夠同時(shí)添加指定類樣式與數(shù)據(jù)源中的類樣式。

然后就去查了些資料做了下整理，匯總了下vue中動(dòng)態(tài)添加類樣式多種用法：

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

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

二. 綁定數(shù)據(jù)變量：

<div :class="classA">Demo2</div> data: {classA: 'class-a' //當(dāng)classA改變時(shí)將更新class }

寫(xiě)在指令中的值會(huì)被視作表達(dá)式，如javascript表達(dá)式，因此v-bind:class接受三目運(yùn)算：

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

三. 綁定對(duì)象：

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

四. 綁定數(shù)組：

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

對(duì)于綁定 數(shù)組這種用法，拓展性就比較大了，可以綜合上邊多種組合使用，如下：

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/xyyt/p/8777724.html

總結(jié)

以上是生活随笔為你收集整理的vue动态绑定类样式ClassName知多少的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。