vue動態繫結class的幾種方式

2022-05-15 12:04:50 字數 832 閱讀 9701

-最簡單的繫結(這裡的active加不加單引號都可以,以下也一樣都能渲染)

:class=""

:class=""  

或者:class=""

第一種(用逗號隔開)

:class=""

第二種(放在data裡面)

//也可以把後面繫結的物件寫在乙個變數放在data裡面,可以變成下面這樣

:class="classobject"

data()

}}第三種(使用computed屬性)

:class="classobject"

data()

},computed:

}}

:class="[isactive,issort]"data() 

}

(注意:三元運算子後面的「:」兩邊的class需要加上單引號,否則不能正確渲染)

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

或者:class="[isactive==1?'active':'']"

或者:class="[isactive==index?'active':'']"

或者:class="[isactive==index?'active':'otheractiveclass']"

//前面這個active在物件裡面可以不加單引號,後面這個sort要加單引號

:class="[, 'sort']"

或者:class="[, 'sort']"

或者:class="[, 'sort']"

vue動態繫結class的幾種方式 Vue

物件方法 class class 或者 class 第一種 用逗號隔開 class 第二種 放在data裡面 也可以把後面繫結的物件寫在乙個變數放在data裡面,可以變成下面這樣 class classobject data 第三種 使用computed屬性 class classobject da...

vue動態繫結class的幾種方式

物件方法 最簡單的繫結 這裡的active加不加單引號都可以,以下也一樣都能渲染 class class 或者 class 第一種 用逗號隔開 class 第二種 放在data裡面 也可以把後面繫結的物件寫在乙個變數放在data裡面,可以變成下面這樣 class classobject data 第...

vue動態繫結class的幾種方式

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