vue-過濾器（filter）的使用詳解
前言
Vue 允許我們在項目中定義過濾器對我們頁面的文本展示進行格式的控制，本文就來總結一下過濾器在項目中的常見使用方法。
正文
1.局部過濾器的註冊
（1）無參局部過濾器
<div id="app"> <!-- 組件內部的過濾器 --> <filter-item :msg="toMsg"></filter-item> </div> <script> // 組件內部註冊過濾器 Vue.component("filter-item", { data() { return { } }, props: ['msg'], filters: { toFixed(value) { if (!value) { return } return value.toFixed(2) }, }, template: "<div>{{msg|toFixed}}</div>" }) new Vue({ el: "#app", data() { return { toMsg: 123, } }, }) </script>
運行結果如下：
上面的程式碼中在子組件內部定義一個過濾器，在其模板中的插值表達式中使用，完成了對字元串的格式化。
（2）帶參局部過濾器
<div id="app"> <!-- 組件內部的過濾器 --> <filter-item :msg="toMsg"></filter-item> </div> <script> // 組件內部註冊過濾器 Vue.component("filter-item", { data() { return { } }, props: ['msg'], filters: { toString(value,arg){ if (!value) { return } console.log("value",value); return value.toString(arg) } }, template: "<div>{{msg|toString(2)}}</div>" }) // 全局註冊過濾器 new Vue({ el: "#app", data() { return { toMsg: 123, } }, }) </script>
運行結果如下：
上面的程式碼中在組件內部定義一個過濾器，接受兩個參數，第一個參數是需要格式化的文本，第二個是需要進行的進位轉化。
2.全局過濾器的註冊
（1）無參全局過濾器
<div id="app"> <!-- 全局的過濾器 --> {{myMsg|toUpper}} </div> <script> // 全局註冊過濾器 new Vue({ el: "#app", data() { return { myMsg: "abcdef" } }, filters: { toUpper(value) { if (!value) { return } return value.toUpperCase() }, }, methods: { } }) </script>
運行結果如下：
上面的程式碼中在vue根組件中定義一個過濾器，該過濾器為全局過濾器，同樣通過插值表達式完成格式轉化。
（2）帶參全局過濾器
<div id="app"> <!-- 傳遞參數的過濾器 --> {{myMsg|toSlice(3)}} </div> <script> // 全局註冊過濾器 new Vue({ el: "#app", data() { return { toMsg: 123, myMsg: "abcdef" } }, filters: { // 傳參的過濾器 toSlice(value,arg){ if (!value) { return } return value.slice(arg) } }, }) </script>
運行結果如下：
上面的程式碼中在vue根組件中定義一個全局過濾器，該過濾器接收兩個參數，第一個參數為需要格式化的文本，第二個為真正的參數。
注意：當局不和全局有兩個名稱相同的過濾器的時候，會首先使用局部過濾器，這裡採用就近原則，局部過濾器會優先於全局過濾器的調用。
3.過濾器的使用
在插值表達式中使用帶個過濾器如上文，如果需要組合使用多個過濾器的時候，需要用 “|”分隔符隔開。使用如下：
<div id="app"> <!-- 串聯的過濾器 --> {{myMsg|toUpper|toReverse}} </div> <script> // 全局註冊過濾器 new Vue({ el: "#app", data() { return { toMsg: 123, myMsg: "abcdef" } }, filters: { toUpper(value) { if (!value) { return } return value.toUpperCase() }, toReverse(value) { if (!value) { return } return value.split("").reverse().join("") }, } }) </script>
運行結果如下：
上面的程式碼使用了串聯的過濾器，首先通過toUpper過濾器對文本進行大寫轉化，然後toReverse過濾器對文本進行反轉轉化，最終得到結果。
寫在最後
以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長踩坑之路會持續更新一些工作中常見的問題和技術點。
