本文旨在分享如何利用vue過濾器，實現簡單、高效的對同乙個字段不同的字段值，渲染出不同的內容。
實際場景中我們可能會遇到後端在傳給我們的資料中，某乙個欄位為type，type的值有1、2、3、4、5、6等，
1-6分別對應的是，蘋果、梨、葡萄、芒果、香蕉、百香果。如何通過寫最少的**就能實現將他們一一對應起來呢？下面將一一介紹：
首先最初級的做法就是：在拿到資料後我們可能會用if/else來判斷，如下所示：filters: else if (val ==== 2) else if (val ==== 3) else if (val === 4) else if (val === 5) else if (val === 6) else
}}
filters:
}}
filters:
}
可以看到，這樣寫我們的確是少寫了很多**，但是有個問題，上面的方法只適用於1-n這種有順序的正整數型別，假如type為-1，1，2，3，23 這種無序的情況就不適用了，怎麼解決呢？且看下面
filters: ,,,,,];
let result = origintypearr.filter((item) => object.keys(item)[0] == row.type);
return result.length > 0 ? result[0][row.type] : '未知型別';
}}
最後兩種方法具體使用看具體場景，若是連續的正整數，可以直接使用第二種方法，若是需要擴充套件性強的，直接使用最後一種。
如有更好的寫法，歡迎交流！！
VUE之全域性過濾器 filter
效果圖 第一步 在src資料夾下新建filters資料夾,在該資料夾下新建index.js 內容如下 人民幣轉大寫 function rmbupper n s s 整 n math.floor n for var i 0 i unit 0 length n 0 i s p.replace 零.零 r...
前端架構之vue過濾器
文章首部新增 toc 強調文字 強調文字 區域性 全域性過濾器 為啥要做全域性呼叫，專案做多了，你會發現乙個時間戳格式化處理，在很多開發功能點裡都會涉及到時間，因此為了避免冗餘 和降低後期維護成本，我們就會想到做好全域性呼叫一勞永逸。全域性階段 新建檔案 下面展示一些內聯 片。module.expo...
vue 傳date型別資料 Vue 過濾器
在學習 vue 的過程中，總是會忘了有過濾器這回事，因為一般獲取了資料後就直接用函式去處理資料了，所以今天就來補一下過濾器的知識。其實在資料上新增過濾器會使得我們 更新優美。只要使用管道符號就可以了。這裡和命令列裡的 管道 或者後端說的 中介軟體 的道理是一樣的，乙個輸入乙個輸出。vue 允許你自定...