技術標籤：Vuevue

做需求遇到一個樣式問題，橫向的選單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

計算屬性判斷方法如下：

這樣就大功告成了，由於計算屬性會自動監聽變數變化，也不需要在點選切換中英文的時候做什麼處理了～～

好久沒寫部落格了，最近發現什麼小技巧就直接點個收藏，這個真的把我折磨到覺得不記一下都對不起我這大半天的時間。。。希望以此為契機繼續開始寫部落格吧～～～在打工人的路上努力前行！