Vue基礎 class的幾種繫結方式

:

class
=""

:

class=""
//或者
:class
=""

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

:class=""
//第二種（放在data裡面）
//也可以把後面繫結的物件寫在乙個變數放在data裡面，可以變成下面這樣
:class
="classobject"
data()
}}//第三種（使用computed）
:class
="classobject"
data()
},computed:
}}

:

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

//前面這個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的幾種方式

我們可以傳給v bind class乙個物件，以動態地切換 class 上面的語法表示active這個 class 存在與否將取決於資料屬性isactive的 truthiness。你可以在物件中傳入更多屬性來動態切換多個 class。此外，v bind class指令也可以與普通的 class 屬...

vue繫結class的幾種方式

1.物件語法 在物件上繫結class屬性，來控制class 的幾種狀態。div script newvue script body 2.陣列語法 將class的屬性值組成乙個陣列來控制class的各種屬性，當class 需要有多個屬性的時候就要用陣列語法來繫結其中的值，這樣做的好處是有利於動態修改c...

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

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