vue動態(tài)綁定class的幾種常用方式小結
更新時間：2019年05月21日 11:06:23 作者：前端那點事
這篇文章主要介紹了vue動態(tài)綁定class的幾種常用方式,結合實例形式總結分析了vue.js常見的對象方法、數組方法進行class動態(tài)綁定相關操作技巧,需要的朋友可以參考下
本文實例講述了vue動態(tài)綁定class的幾種常用方式。分享給大家供大家參考，具體如下：
對象方法
最簡單的綁定（這里的active加不加單引號都可以，以下也一樣都能渲染）
:class="{ 'active': isActive }"
- 判斷是否綁定一個active
:class="{'active':isActive==-1}"
或者
:class="{'active':isActive==index}"
- 綁定并判斷多個
第一種（用逗號隔開）
:class="{ 'active': isActive, 'sort': isSort }"
第二種（放在data里面）
//也可以把后面綁定的對象寫在一個變量放在data里面，可以變成下面這樣
:class="classObject"
data() {
return {
classObject:{ active: true, sort:false }
}
}
第三種（使用computed屬性）
:class="classObject"
data() {
return {
isActive: true,
isSort: false
}
},
computed: {
classObject: function () {
return {
active: this.isActive,
sort:this.isSort
}
}
}
數組方法
- 單純數組
:class="[isActive,isSort]"
data() {
return{
isActive:'active',
isSort:'sort'
}
}
- 數組與三元運算符結合判斷選擇需要的class
（注意：三元運算符后面的“：”兩邊的class需要加上單引號，否則不能正確渲染）
:class="[isActive?'active':'']"
或者
:class="[isActive==1?'active':'']"
或者
:class="[isActive==index?'active':'']"
或者
:class="[isActive==index?'active':'otherActiveClass']"
- 數組對象結合動態(tài)判斷
//前面這個active在對象里面可以不加單引號，后面這個sort要加單引號
:class="[{ active: isActive }, 'sort']"
或者
:class="[{ active: isActive==1 }, 'sort']"
或者
:class="[{ active: isActive==index }, 'sort']"
希望本文所述對大家vue.js程序設計有所幫助。
相關文章
這篇文章主要為大家詳細介紹了vue實現倒計時功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要介紹了vue關于eslint空格縮進等的報錯問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
本篇文章主要介紹了關于在vue-cli中使用微信自動登錄和分享的實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
Vue2+Elementui?Dialog實現封裝自定義彈窗組件
在日常的管理系統(tǒng)界面中,我們寫的最多的除了列表表格之外,就是各種彈窗組件,本文就來為大家詳細介紹一下Vue2如何結合Elementui?Dialog實現封裝自定義彈窗組件,希望對大家有所幫助2023-12-12
vuex+axios+element-ui實現頁面請求loading操作示例
這篇文章主要介紹了vuex+axios+element-ui實現頁面請求loading操作,結合實例形式分析了vuex+axios+element-ui實現頁面請求過程中l(wèi)oading遮罩層相關操作技巧與使用注意事項,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vue引入css文件導致全局污染的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了antd vue v-decorator的取值與賦值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了vue組件詳解之使用slot分發(fā)內容及Vue組件中slot的用法,需要的朋友可以參考下2018-04-04
基于vue2.0+vuex+localStorage開發(fā)的本地記事本示例
這篇文章主要介紹了基于vue2.0+vuex+localStorage開發(fā)的本地記事本示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-02-02
這篇文章主要介紹了詳解nuxt sass全局變量(公共scss解決方案)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06