VUE程式碼優化(1) - 全域性過濾器

簡述

使用vue中的Vue.filter方法實現程式碼的簡潔開發，讓冗餘的程式碼變的舒爽。

Vue.filter

程式碼比較

不多說，直接上程式碼。

使用前

使用後

官方概述

Vue.js 允許你自定義過濾器，可被用於一些常見的文字格式化。過濾器可以用在兩個地方：雙花括號插值和v-bind表示式(後者從 2.1.0+ 開始支援)。過濾器應該被新增在 JavaScript 表示式的尾部，由“管道”符號指示。

如何使用

Vue.filter是全域性方法，不過一般建議在main.js中使用，也可以單獨寫一個檔案。

相對應的就是，nodeInfo.status就是傳入的引數，nodeInfoStatus就是管道名稱。

filter處程式碼優化

這麼寫是沒問題，但是一個專案裡面肯定是要有很多這種filter方法需要定義。

所以說要做一個彙總的檔案，專門收集定義的方法。

定義一個filter檔案。

然後再

程式碼就變得清爽很多了。