Vue中動態(tài)class的多種寫法

更新時間：2022年12月22日 13:40:47 作者：D_jing20

這篇文章主要介紹了Vue之動態(tài)class的幾種寫法,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

在vue 中,class 動態(tài)綁定是一個很常見的需求,平時的使用頻率也很高,下面是總結的 class 綁定的幾種寫法。

對象方法

最簡單的綁定

: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ù)組與三元運算符結合判斷選擇需要的class

注意：三元運算符后面的“：”兩邊的class需要加上單引號，否則不能正確渲染

:class="[isActive?'active':'']"
或者
:class="[isActive==1?'active':'']"
或者
:class="[isActive==index?'active':'']"
或者
:class="[isActive==index?'active':'otherActiveClass']"

數(shù)組對象結合動態(tài)判斷

//前面這個active在對象里面可以不加單引號，后面這個sort要加單引號
:class="[{ active: isActive }, 'sort']"
或者
:class="[{ active: isActive==1 }, 'sort']"
或者
:class="[{ active: isActive==index }, 'sort']"

到此這篇關于Vue之動態(tài)class的幾種寫法的文章就介紹到這了,更多相關Vue 動態(tài)class內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

在vue中完美使用ueditor組件(cdn)解讀
這篇文章主要介紹了在vue中完美使用ueditor組件(cdn)解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
Vue.prototype全局變量的實現(xiàn)示例
在Vue中可以使用Vue.prototype向Vue的全局作用域添加屬性或方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2024-06-06
VUE指令和pinia控制按鈕權限示例詳解
這篇文章主要為大家介紹了VUE指令和pinia控制按鈕權限示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-09-09
vue實現(xiàn)簡單的計算器功能
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單的計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-09-09
webpack4+Vue搭建自己的Vue-cli項目過程分享
這篇文章主要介紹了webpack4+Vue搭建自己的Vue-cli，對于vue-cli的強大,使用過的人都知道,極大的幫助我們降低了vue的入門門檻,感興趣的朋友跟隨腳本之家小編一起看看吧
2018-08-08
Vue導入Echarts實現(xiàn)散點圖
這篇文章主要為大家詳細介紹了Vue導入Echarts實現(xiàn)散點圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-12-12
詳解vue樣式穿透的幾種方式
本文主要介紹了vue樣式穿透的幾種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-06-06
vite多頁面配置項目實戰(zhàn)
vite官方文檔中有關于多頁面應用模式如果配置的說明,下面這篇文章主要給大家介紹了關于vite多頁面配置的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-04-04
vue中elementUI表單循環(huán)驗證方式
這篇文章主要介紹了vue中elementUI表單循環(huán)驗證方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue3中超好用的插件整理
最近找到幾個好用的插件,這里分享一下,下面這篇文章主要給大家介紹了關于vue3中超好用的插件整理,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-02-02