Vue中的過濾器如何聲明與使用

這篇文章主要講解了“Vue中的過濾器如何聲明與使用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue中的過濾器如何聲明與使用”吧！

一、什么是過濾器

過濾器提供給我們的一種數據處理方式。過濾器功能不是必須要使用的，因為它所實現的功能也能用計算屬性或者函數調用的方式來實現。

Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化。

二、過濾器聲明與使用

過濾器應該被添加在JavaScript 表達式的尾部，由“管道符”進行調用。

過濾器可以用在兩個地方：插值表達式和v-bind 屬性綁定。

示例：

在 {{ }} 中，通過管道符 " | " 調用 capitalize() ，對message進行格式化。

<p>{{ message | capitalize }}</p>

在 v-bind中，通過管道符 " | " 調用 formatId() ，對rawId進行格式化。

<div v-bind:id="rawId | formatId"></div>

在創建 vue 實例期間，可以在 filters 節點中定義過濾器

示例：

const vm = new Vue({
    el: '#app',
    data: {
        ...
    },
    filters: {
        capitalize(str) {
            // 編寫過濾的邏輯，即對入參str的處理
            return ...;
        }
    }
})

完整案例

<div id="app">
    <p :title="info | capitalize">{{message | capitalize}}</p>
</div>
 
<script src="../../lib/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js',
            info: 'title info',
        },
        filters: {
            capitalize(str) {
                // 第一個字母大寫，slice(1) 拼接上下標為1之后的字母
                return str.charAt(0).toUpperCase() + str.slice(1)
            }
        }
    })
</script>

輸出結果

Hello vue.js

str.charAt(0).toUpperCase()：表示取下標為0的字母，并將其轉為大寫。

str.slice(1)：表示從str中提取第2個字符到最后的字符，并返回新字符串。

三、Vue過濾器的分類

1.按照作用范圍分類

按照作用范圍分類，可以分為全局過濾器和局部過濾器

（1）全局過濾器：通過Vue.filter()方法定義的過濾器，在整個應用程序中都可以使用。

（2）局部過濾器：在Vue組件選項中通過filters屬性定義的過濾器，只能在該組件及其子組件中使用（就是上述的案例代碼）。

示例代碼

<div id="app1">
    <p :title="info | capitalize">{{message | capitalize}}</p>
</div>
<div id="app2">
    <p>{{abc | capitalize}}</p>
</div>
 
<script src="../../lib/vue-2.6.12.js"></script>
<script>
    // 全局過濾器
    Vue.filter('capitalize', (str) => {
        return str.charAt(0).toUpperCase() + str.slice(1) + '~~~'
    })
</script>
<script>
    const vm1 = new Vue({
        el: '#app1',
        data: {
            message: 'hello vue.js',
            info: 'title info',
        },
        // 私有過濾器，只能被當前 vm 所控制的區域所使用
        filters: {
            capitalize(str) {
                return str.charAt(0).toUpperCase() + str.slice(1)
            },
        },
    })
</script>
<script>
    const vm2 = new Vue({
        el: '#app2',
        data: {
            abc: 'abc'
        }
    })
</script>

運行結果

2.按照使用方式分類

按照使用方式分類，可以分為普通過濾器和帶參數過濾器

（1）普通過濾器：不帶參數的過濾器，可以對數據進行簡單的格式化或轉換，例如將字符串轉換為大寫形式，將數字格式化為貨幣格式等。

這個也就是我們上述代碼的例子。

（2）帶參數過濾器：帶有一個或多個參數的過濾器，可以根據參數的不同實現不同的功能，例如根據參數過濾數組，根據參數指定日期格式等。

除此之外，Vue.js的過濾器還可以按照數據類型進行分類，例如針對字符串、數字、日期、數組等不同的數據類型，提供了不同的過濾器實現。

具體示例請看第五點。

四、連續調用多個過濾器

過濾器可以串聯地進行調用

格式

{{message|filterA|filterB|filterC}}

• 把message的值交給filterA進行處理

• 把filterA處理的結果，再交給filterB進行處理

• 把filterB處理的結果，再交給filterC進行處理

• 最后把filterC處理的結果作為最終的值渲染到頁面上

說白了，就是將前者過濾后的值交給后者過濾，直至最后一個！

完整示例代碼

<div id="app">
    <p :title="info | capitalize">{{message | capitalize | maxLength}}</p>
</div>
 
<script src="../../lib/vue-2.6.12.js"></script>
<script>
    // 全局過濾器
    // 首字母轉大寫的過濾器
    Vue.filter('capitalize', (str) => {
        return str.charAt(0).toUpperCase() + str.slice(1)
    })
 
    // 定義控制文本長度的過濾器
    Vue.filter('maxLength', (str) => {
        if (str.length <= 10) return str
        return str.slice(0, 10) + '...'
    })
</script>
 
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js',
            info: 'title info',
        },
    })
</script>

運行結果

Hello vue....

五、過濾器傳參

過濾器的本質是 JavaScript 函數，因此可以接收參數

格式如下

<p>{{ message | filterA(arg1, arg2)}}</p>
 
Vue.filter('filterA', (msg, arg1, arg2) => {
    // 過濾器邏輯代碼
})

參數解析

第一個參數：永遠都是“管道符”前面待處理的值

從第二個參數開始，才是調用過濾器時傳遞過來的arg1參數 和 arg2參數

完整示例代碼

<div id="app">
    <p :title="info | capitalize">{{message | capitalize | maxLength(3)}}</p>
</div>
 
<script src="../../lib/vue-2.6.12.js"></script>
<script>
    // 全局過濾器
    // 首字母轉大寫的過濾器
    Vue.filter('capitalize', (str) => {
        return str.charAt(0).toUpperCase() + str.slice(1)
    })
 
    // 定義控制文本長度的過濾器
    Vue.filter('maxLength', (str, len = 10) => {
        if (str.length <= len) return str
        return str.slice(0, len) + '...'
    })
</script>
 
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            message: 'hello vue.js',
            info: 'title info',
        },
    })
</script>

運行結果

Hel...

六、過濾器的兼容性問題

過濾器僅在vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了過濾器相關的功能。

在企業級項目開發中

如果使用的是2.x 版本的 vue，則依然可以使用過濾器相關的功能

如果項目已經升級到了3.x 版本的 vue，官方建議使用計算屬性或方法代替被剔除的過濾器功能。

感謝各位的閱讀，以上就是“Vue中的過濾器如何聲明與使用”的內容了，經過本文的學習后，相信大家對Vue中的過濾器如何聲明與使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！