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