vue元素根據不同條件切換多個class
阿新 • • 發佈:2020-12-24
做需求遇到一個樣式問題,橫向的選單tab在非管理員模式下有7個,在管理員模式下有8個,每個tab在中英文狀態下的長度又有長有短,用彈性佈局搞了好久總是不如意,最後決定用%寫死每個tab的width,記錄踩坑如下:
1、最開始給每個元素的style繫結一個變數,切換語言時判斷各種條件,更改變數值,不為所動= =失敗
2、以為是style的問題,換成class綁變數值,同樣改動不生效= =失敗
3、查閱資料發現官方這樣推薦:
v-bind:class="{ active: isActive, 'text-danger': hasError }"
其中active和text-danger是想動態繫結的兩個類名,isActive和hasError是控制其:前邊類名是否顯示的動態變數
但是這種isActive和hasError只能取true或者false兩種值,也就是說這個class的樣式要麼生效要麼不生效,但是我一個class至少有4種樣式。。(逐漸暴躁)
4、又是一頓翻資料,發現了這個:(繫結一個返回物件的計算屬性:Vue.js 將繫結表示式限制為一個表示式。如果需要多於一個表示式的邏輯,應當使用計算屬性。)
<div v-bind:class="classObject"></div> data: { isActive: true, error: null }, computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } }
套用一下:
這裡是8個標籤
對應8個計算屬性
以home為例,在4種條件下的width分別為13%,11%,10%,9%,於是定義4個對應的class:home1234
計算屬性判斷方法如下:
這樣就大功告成了,由於計算屬性會自動監聽變數變化,也不需要在點選切換中英文的時候做什麼處理了~~
好久沒寫部落格了,最近發現什麼小技巧就直接點個收藏,這個真的把我折磨到覺得不記一下都對不起我這大半天的時間。。。希望以此為契機繼續開始寫部落格吧~~~在打工人的路上努力前行!