vue動態繫結class的幾種方式

第一種：（最簡單的繫結）

1.繫結單個class

html部分：

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

data() ;
}

結果渲染為：

2.若要繫結多個class，需要逗號隔開就行：（這裡的activetwo加不加引號都可以，也一樣都能渲染，如下）

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

data() ;
}

結果渲染為：

第二種：（繫結的資料物件）

data: 
}

第三種：（繫結乙個返回物件的計算屬性）

export default ;
},computed: 
}}

結果渲染為：

第四種：（單純陣列方法）

data() ;
},

結果渲染為：

第五種：（陣列與三元運算子結合判斷選擇需要的class）

data() ;
},

結果渲染為：

以上或者參考vue官方文件

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

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

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