vue動態繫結class的最常用幾種方式

2022-07-22 20:12:18 字數 1713 閱讀 5953

第一種:(最簡單的繫結)

1.繫結單個class

html部分:

<

div

:class

="">

div>

js部分:判斷是否繫結乙個active

data() ;

}

結果渲染為:

<

div

class

="active"

>

div>

2.若要繫結多個class,需要逗號隔開就行:

(這裡的activetwo加不加引號都可以,也一樣都能渲染,如下)

<

div

class

="activeone"

v-bind:class

="">

div>

js部分:判斷是否繫結對應class

data() ;

}

結果渲染為:

<

div

class

="activeone activetwo activethree"

>

div>

第二種:(繫結的資料物件)

<

div

:class

="classobject"

>

div>

data: 

}

第三種:(繫結乙個返回物件的計算屬性)

<

div

:class

="classobject"

>

div>

export default

; },

computed:

}}

結果渲染為:

<

div

class

="active"

>

div>

第四種:(單純陣列方法)

<

div

:class

="[activeclass, errorclass]"

>

div>

data() ;

},

結果渲染為:

<

div

class

="active disactive"

>

div>

第五種:(陣列與三元運算子結合判斷選擇需要的class)

<

div

:class

="[isactive?'active':'disactive']"

>

div>

data() ;

},

結果渲染為:

<

div

class

="disactive"

>

div>

vue動態繫結class的最常用幾種方式

第一種 最簡單的繫結 1.繫結單個class html部分 js部分 判斷是否繫結乙個active data 結果渲染為 2.若要繫結多個class,需要逗號隔開就行 這裡的activetwo加不加引號都可以,也一樣都能渲染,如下 js部分 判斷是否繫結對應class data 結果渲染為 第二種 ...

vue系列 class動態繫結

操作元素的 class 列表和內聯樣式是資料繫結的乙個常見需求。因為它們都是屬性,所以我們可以用 v bind 處理它們 只需要通過表示式計算出字串結果即可。不過,字串拼接麻煩且易錯。因此,在將 v bind 用於 class 和 style 時,vue.js 做了專門的增強。表示式結果的型別除了字...

vue動態繫結class的方式

注 以下的 active 和 sort 都是一種類名 物件方法原理 根據冒號後面的結果為true或false來決定是否新增冒號前面的class名 注 這裡的active加不加單引號都可以 class class 或者 class 第一種 用逗號隔開 class 第二種 放在data裡面 class ...