Vue動(dòng)態(tài)綁定Class的幾種常用方式
更新時(shí)間：2023年03月09日 08:55:36 作者：丑小喵呀
在vue框架開(kāi)發(fā)中,有時(shí)候我們需要對(duì)元素的樣式進(jìn)行動(dòng)態(tài)控制,比如tab按鈕的切換,下面這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)綁定Class的幾種常用方式,需要的朋友可以參考下
第一種：基礎(chǔ)用法
Html部分：
<div :class="active">基本用法</div>
Js部分：
data() {
? ? ? ? return {
? ? ? ? ? ? ? ? active: 'active'
? ? ? ? }
}第二種：三元運(yùn)算綁定單個(gè) / 數(shù)組形式綁定多個(gè)Class
Html部分：
<div :class="isBind ? 'active' : ''">三元運(yùn)算</div> <div :class="[isBind ? 'active' : '', active]">使用數(shù)組</div>
Js部分：
data() {
? ? ? ? return {
? ? ? ? ? ? ? ? isBind: false,
? ? ? ? ? ? ? ? active: 'active'
? ? ? ? }
}第三種：計(jì)算屬性綁定單個(gè)或多個(gè)Class
Html部分：
<div :class="classObject">使用計(jì)算屬性</div>
Js部分：
data() {
? ? ? ? return {
? ? ? ? ? ? ? ? active: 'active',
? ? ? ? ? ? ? ? finishData: '2022-10-18 00:00:00'
? ? ? ? }
},
computed: {
? ? ? ? classObject() {
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? ? ? active: this.isBind,
? ? ? ? ? ? ? ? ? ? ? ? 'red-color': this.finishData != ''
? ? ? ? ? ? ? ? }
? ? ? ? }
}第四種：使用函數(shù)綁定Class
Html部分：可自定義傳參
div :class="bindClass(currDate,finishData)">函數(shù)綁定</div>
Js部分：可處理復(fù)雜邏輯
data() {
? ? ? ? return {
? ? ? ? ? ? ? ? currDate: '2022-10-20 00:00:00',
? ? ? ? ? ? ? ? finishData: '2022-10-18 00:00:00'
? ? ? ? }
},
methods: {
? ? ? ? // 動(dòng)態(tài)綁定Class
? ? ? ? bindClass(currDate,finishData){
? ? ? ? ? ? ? ? let classInfo = { redColor: false, active: true }
? ? ? ? ? ? ? ? if(new Date(finishData).getTime() > new Date(currDate).getTime()){
? ? ? ? ? ? ? ? ? ? ? ? classInfo.redColor = true
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? return classInfo
? ? ? ? }
}總結(jié)
到此這篇關(guān)于Vue動(dòng)態(tài)綁定Class的幾種常用方式的文章就介紹到這了,更多相關(guān)Vue動(dòng)態(tài)綁定Class內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
今天小編就為大家分享一篇關(guān)于vue-router命名視圖的使用講解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
Vue中的 mixins 和 provide/inject詳解
這篇文章主要介紹了Vue中的 mixins 和 provide/inject詳解,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
vue v-viewer組件使用示例詳解(v-viewer輪播圖)
這篇文章主要介紹了vue v-viewer組件使用示例詳解(v-viewer輪播圖),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
vue+iview如何實(shí)現(xiàn)拼音、首字母、漢字模糊搜索
這篇文章主要介紹了vue+iview如何實(shí)現(xiàn)拼音、首字母、漢字模糊搜索，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
安裝nvm?node版本管理器的操作方法(vue2.x遷移vue3.x)
這篇文章主要介紹了安裝nvm?node版本管理器(vue2.x遷移vue3.x)的操作方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了解決vue中監(jiān)聽(tīng)返回鍵問(wèn)題,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
vue點(diǎn)擊按鈕動(dòng)態(tài)創(chuàng)建與刪除組件功能
這篇文章主要介紹了vue點(diǎn)擊按鈕動(dòng)態(tài)創(chuàng)建與刪除組件功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
這篇文章主要介紹了Vuex的初探與實(shí)戰(zhàn)小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
在Vue?3中,可以通過(guò)創(chuàng)建一個(gè)事件總線（event?bus）來(lái)實(shí)現(xiàn)組件之間的通信,要在Vue?3中使用事件總線,主要步驟有：1、創(chuàng)建一個(gè)新的Vue實(shí)例作為事件總線,2、在組件中引入并使用該事件總線,以下是詳細(xì)的步驟和示例,需要的朋友可以參考下2025-01-01
這篇文章主要介紹了vue element el-transfer增加拖拽功能，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01