Vue中動(dòng)態(tài)class的多種寫(xiě)法
更新時(shí)間：2022年12月22日 13:40:47 作者：D_jing20
這篇文章主要介紹了Vue之動(dòng)態(tài)class的幾種寫(xiě)法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
在vue 中,class 動(dòng)態(tài)綁定是一個(gè)很常見(jiàn)的需求,平時(shí)的使用頻率也很高,下面是總結(jié)的 class 綁定的幾種寫(xiě)法。
對(duì)象方法
最簡(jiǎn)單的綁定
:class="{ 'active': isActive }"判斷是否綁定一個(gè)active
:class="{'active':isActive==-1}"
或者
:class="{'active':isActive==index}"
綁定并判斷多個(gè)
第一種（用逗號(hào)隔開(kāi)）
:class="{ 'active': isActive, 'sort': isSort }"
第二種（放在data里面）
//也可以把后面綁定的對(duì)象寫(xiě)在一個(gè)變量放在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ù)組與三元運(yùn)算符結(jié)合判斷選擇需要的class
注意：三元運(yùn)算符后面的“：”兩邊的class需要加上單引號(hào)，否則不能正確渲染
:class="[isActive?'active':'']" 或者 :class="[isActive==1?'active':'']" 或者 :class="[isActive==index?'active':'']" 或者 :class="[isActive==index?'active':'otherActiveClass']"
數(shù)組對(duì)象結(jié)合動(dòng)態(tài)判斷
//前面這個(gè)active在對(duì)象里面可以不加單引號(hào)，后面這個(gè)sort要加單引號(hào)
:class="[{ active: isActive }, 'sort']"
或者
:class="[{ active: isActive==1 }, 'sort']"
或者
:class="[{ active: isActive==index }, 'sort']"到此這篇關(guān)于Vue之動(dòng)態(tài)class的幾種寫(xiě)法的文章就介紹到這了,更多相關(guān)Vue 動(dòng)態(tài)class內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue CLI 3搭建vue+vuex最全分析(推薦)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了如何在 Vue 中使用 JSX，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-02-02
這篇文章主要介紹了vue 自定義內(nèi)置組件 select的相關(guān)知識(shí)，整合了第三方j(luò)query 插件select2,具體實(shí)例代碼大家參考下本文2018-04-04
vue?動(dòng)態(tài)style?拼接寬度問(wèn)題
這篇文章主要介紹了vue?動(dòng)態(tài)style?拼接寬度問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
element?table數(shù)據(jù)量太大導(dǎo)致網(wǎng)頁(yè)卡死崩潰的解決辦法
當(dāng)頁(yè)面數(shù)據(jù)過(guò)多,前端渲染大量的DOM時(shí),會(huì)造成頁(yè)面卡死問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于element?table數(shù)據(jù)量太大導(dǎo)致網(wǎng)頁(yè)卡死崩潰的解決辦法,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vue Ajax跨域請(qǐng)求實(shí)例詳解,需要的朋友可以參考下2017-06-06
vuejs實(shí)現(xiàn)ready函數(shù)加載完之后執(zhí)行某個(gè)函數(shù)的方法
這篇文章主要介紹了vuejs實(shí)現(xiàn)ready函數(shù)加載完之后執(zhí)行某個(gè)函數(shù)的方法,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了vue .sync修飾符的使用,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了vue實(shí)現(xiàn)顯示消息提示框功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了Vue 自定義組件 v-model 使用介紹,包括vue2中使用和vue3中使用，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08