Vue動態(tài)綁定Class的幾種常用方式
更新時間：2023年03月09日 08:55:36 作者：丑小喵呀
在vue框架開發(fā)中,有時候我們需要對元素的樣式進(jìn)行動態(tài)控制,比如tab按鈕的切換,下面這篇文章主要給大家介紹了關(guān)于Vue動態(tài)綁定Class的幾種常用方式,需要的朋友可以參考下
第一種：基礎(chǔ)用法
Html部分：
<div :class="active">基本用法</div>
Js部分：
data() {
? ? ? ? return {
? ? ? ? ? ? ? ? active: 'active'
? ? ? ? }
}第二種：三元運(yùn)算綁定單個 / 數(shù)組形式綁定多個Class
Html部分：
<div :class="isBind ? 'active' : ''">三元運(yùn)算</div> <div :class="[isBind ? 'active' : '', active]">使用數(shù)組</div>
Js部分：
data() {
? ? ? ? return {
? ? ? ? ? ? ? ? isBind: false,
? ? ? ? ? ? ? ? active: 'active'
? ? ? ? }
}第三種：計(jì)算屬性綁定單個或多個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: {
? ? ? ? // 動態(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動態(tài)綁定Class的幾種常用方式的文章就介紹到這了,更多相關(guān)Vue動態(tài)綁定Class內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue.js組件props數(shù)據(jù)驗(yàn)證實(shí)現(xiàn)詳解
這篇文章主要為大家詳細(xì)介紹了Vue.js組件props數(shù)據(jù)驗(yàn)證的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
Vue element-ui父組件控制子組件的表單校驗(yàn)操作
這篇文章主要介紹了Vue element-ui父組件控制子組件的表單校驗(yàn)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了Vue仿Bibibili首頁,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
有時候我們需要播放 m3u8 格式的視頻,或者實(shí)現(xiàn)視頻播放器更多定制化需求,HTML 的 video 元素?zé)o法實(shí)現(xiàn)這些需求,這時候可以考慮使用 Video.js,本文給大家介紹了vue3使用video.js播放m3u8格式視頻的操作指南,需要的朋友可以參考下2024-07-07
這篇文章主要為大家介紹了Vue 2源碼解讀$mount原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue+elementUI動態(tài)生成面包屑導(dǎo)航教程
今天小編就為大家分享一篇vue+elementUI動態(tài)生成面包屑導(dǎo)航教程，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
今天小編就為大家分享一篇vue router 傳參獲取不到的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
本文主要介紹了vue實(shí)現(xiàn)頁面div盒子拖拽排序功能，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了vue element-ui讀取pdf文件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
Vant實(shí)現(xiàn)上傳多個圖片或視頻,更改視頻預(yù)覽圖
這篇文章主要介紹了Vant實(shí)現(xiàn)上傳多個圖片或視頻,更改視頻預(yù)覽圖，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10