vue動態(tài)綁定class的幾種常用方式小結(jié)
更新時間：2019年05月21日 11:06:23 作者：前端那點事
這篇文章主要介紹了vue動態(tài)綁定class的幾種常用方式,結(jié)合實例形式總結(jié)分析了vue.js常見的對象方法、數(shù)組方法進行class動態(tài)綁定相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了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
}
}
}
數(shù)組方法
- 單純數(shù)組
:class="[isActive,isSort]"
data() {
return{
isActive:'active',
isSort:'sort'
}
}
- 數(shù)組與三元運算符結(jié)合判斷選擇需要的class
（注意：三元運算符后面的“：”兩邊的class需要加上單引號，否則不能正確渲染）
:class="[isActive?'active':'']"
或者
:class="[isActive==1?'active':'']"
或者
:class="[isActive==index?'active':'']"
或者
:class="[isActive==index?'active':'otherActiveClass']"
- 數(shù)組對象結(jié)合動態(tài)判斷
//前面這個active在對象里面可以不加單引號，后面這個sort要加單引號
:class="[{ active: isActive }, 'sort']"
或者
:class="[{ active: isActive==1 }, 'sort']"
或者
:class="[{ active: isActive==index }, 'sort']"
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
Vue router錯誤跳轉(zhuǎn)到首頁("/")的問題及解決
這篇文章主要介紹了Vue router錯誤跳轉(zhuǎn)到首頁("/")的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue.js 實現(xiàn)tab切換并變色操作講解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
解決vue bus.$emit觸發(fā)第一次$on監(jiān)聽不到問題
這篇文章主要介紹了解決vue bus.$emit觸發(fā)第一次$on監(jiān)聽不到問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了如何解決vue在ios微信"復(fù)制鏈接"功能問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue ssr+koa2構(gòu)建服務(wù)端渲染的示例代碼
這篇文章主要介紹了vue ssr+koa2構(gòu)建服務(wù)端渲染的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了vue 定制上傳按鈕的樣式的兩種方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue下載二進制流圖片操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue中的attribute和property的具體使用及區(qū)別
本文主要介紹了vue中的attribute和property的具體使用及區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue3項目如何使用prettier格式化代碼問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本文主要介紹了vue2實現(xiàn)傳送門效果的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04