vue動態繫結class的方式

注：以下的 active 和 sort 都是一種類名

物件方法

原理：根據冒號後面的結果為true或false來決定是否新增冒號前面的class名

注：這裡的active加不加單引號都可以

:

class
=""

:

class
=""  或者:
class
=""

//第一種（用逗號隔開）

:class=""
//第二種（放在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']"

:

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

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的幾種方式

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