Vue動態修改class

2022-05-19 12:45:09 字數 532 閱讀 1685

#####物件方法

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

:class=""

1判斷是否繫結乙個active

:class=""

或者:class=""12

3繫結並判斷多個

第一種(用逗號隔開)

:class=""

第二種(放在data裡面)

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

:class="classobject"

data() }}

第三種(使用computed屬性)

:class="classobject"

data()

},computed: }}

1234

5678

9101112

1314

1516

1718

1920

2122

2324

2526

#####陣列方法

Vue 動態賦值 class

vue 在操作 dom 元素的 class 屬性時,有以下多種方法 通過以下 class 的方式可以決定該元素是否擁有名稱為show的 class class watch mooc panel class div template type text ecmascript 6 export defa...

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 ...