Vue中的過(guò)濾器如何聲明與使用

這篇文章主要講解了“Vue中的過(guò)濾器如何聲明與使用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Vue中的過(guò)濾器如何聲明與使用”吧！

一、什么是過(guò)濾器

過(guò)濾器提供給我們的一種數(shù)據(jù)處理方式。過(guò)濾器功能不是必須要使用的，因?yàn)樗鶎?shí)現(xiàn)的功能也能用計(jì)算屬性或者函數(shù)調(diào)用的方式來(lái)實(shí)現(xiàn)。

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

二、過(guò)濾器聲明與使用

過(guò)濾器應(yīng)該被添加在JavaScript 表達(dá)式的尾部，由“管道符”進(jìn)行調(diào)用。

過(guò)濾器可以用在兩個(gè)地方：插值表達(dá)式和v-bind 屬性綁定。

示例：

在 {{ }} 中，通過(guò)管道符 " | " 調(diào)用 capitalize() ，對(duì)message進(jìn)行格式化。

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

在 v-bind中，通過(guò)管道符 " | " 調(diào)用 formatId() ，對(duì)rawId進(jìn)行格式化。

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

在創(chuàng)建 vue 實(shí)例期間，可以在 filters 節(jié)點(diǎn)中定義過(guò)濾器

示例：

const vm = new Vue({
    el: '#app',
    data: {
        ...
    },
    filters: {
        capitalize(str) {
            // 編寫(xiě)過(guò)濾的邏輯，即對(duì)入?yún)tr的處理
            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) {
                // 第一個(gè)字母大寫(xiě)，slice(1) 拼接上下標(biāo)為1之后的字母
                return str.charAt(0).toUpperCase() + str.slice(1)
            }
        }
    })
</script>

輸出結(jié)果

Hello vue.js

str.charAt(0).toUpperCase()：表示取下標(biāo)為0的字母，并將其轉(zhuǎn)為大寫(xiě)。

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

三、Vue過(guò)濾器的分類(lèi)

1.按照作用范圍分類(lèi)

按照作用范圍分類(lèi)，可以分為全局過(guò)濾器和局部過(guò)濾器

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

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

示例代碼

<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>
    // 全局過(guò)濾器
    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',
        },
        // 私有過(guò)濾器，只能被當(dāng)前 vm 所控制的區(qū)域所使用
        filters: {
            capitalize(str) {
                return str.charAt(0).toUpperCase() + str.slice(1)
            },
        },
    })
</script>
<script>
    const vm2 = new Vue({
        el: '#app2',
        data: {
            abc: 'abc'
        }
    })
</script>

運(yùn)行結(jié)果

2.按照使用方式分類(lèi)

按照使用方式分類(lèi)，可以分為普通過(guò)濾器和帶參數(shù)過(guò)濾器

（1）普通過(guò)濾器：不帶參數(shù)的過(guò)濾器，可以對(duì)數(shù)據(jù)進(jìn)行簡(jiǎn)單的格式化或轉(zhuǎn)換，例如將字符串轉(zhuǎn)換為大寫(xiě)形式，將數(shù)字格式化為貨幣格式等。

這個(gè)也就是我們上述代碼的例子。

（2）帶參數(shù)過(guò)濾器：帶有一個(gè)或多個(gè)參數(shù)的過(guò)濾器，可以根據(jù)參數(shù)的不同實(shí)現(xiàn)不同的功能，例如根據(jù)參數(shù)過(guò)濾數(shù)組，根據(jù)參數(shù)指定日期格式等。

除此之外，Vue.js的過(guò)濾器還可以按照數(shù)據(jù)類(lèi)型進(jìn)行分類(lèi)，例如針對(duì)字符串、數(shù)字、日期、數(shù)組等不同的數(shù)據(jù)類(lèi)型，提供了不同的過(guò)濾器實(shí)現(xiàn)。

具體示例請(qǐng)看第五點(diǎn)。

四、連續(xù)調(diào)用多個(gè)過(guò)濾器

過(guò)濾器可以串聯(lián)地進(jìn)行調(diào)用

格式

{{message|filterA|filterB|filterC}}

• 把message的值交給filterA進(jìn)行處理

• 把filterA處理的結(jié)果，再交給filterB進(jìn)行處理

• 把filterB處理的結(jié)果，再交給filterC進(jìn)行處理

• 最后把filterC處理的結(jié)果作為最終的值渲染到頁(yè)面上

說(shuō)白了，就是將前者過(guò)濾后的值交給后者過(guò)濾，直至最后一個(gè)！

完整示例代碼

<div id="app">
    <p :title="info | capitalize">{{message | capitalize | maxLength}}</p>
</div>
 
<script src="../../lib/vue-2.6.12.js"></script>
<script>
    // 全局過(guò)濾器
    // 首字母轉(zhuǎn)大寫(xiě)的過(guò)濾器
    Vue.filter('capitalize', (str) => {
        return str.charAt(0).toUpperCase() + str.slice(1)
    })
 
    // 定義控制文本長(zhǎng)度的過(guò)濾器
    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>

運(yùn)行結(jié)果

Hello vue....

五、過(guò)濾器傳參

過(guò)濾器的本質(zhì)是 JavaScript 函數(shù)，因此可以接收參數(shù)

格式如下

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

參數(shù)解析

第一個(gè)參數(shù)：永遠(yuǎn)都是“管道符”前面待處理的值

從第二個(gè)參數(shù)開(kāi)始，才是調(diào)用過(guò)濾器時(shí)傳遞過(guò)來(lái)的arg1參數(shù) 和 arg2參數(shù)

完整示例代碼

<div id="app">
    <p :title="info | capitalize">{{message | capitalize | maxLength(3)}}</p>
</div>
 
<script src="../../lib/vue-2.6.12.js"></script>
<script>
    // 全局過(guò)濾器
    // 首字母轉(zhuǎn)大寫(xiě)的過(guò)濾器
    Vue.filter('capitalize', (str) => {
        return str.charAt(0).toUpperCase() + str.slice(1)
    })
 
    // 定義控制文本長(zhǎng)度的過(guò)濾器
    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>

運(yùn)行結(jié)果

Hel...

六、過(guò)濾器的兼容性問(wèn)題

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

在企業(yè)級(jí)項(xiàng)目開(kāi)發(fā)中

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

如果項(xiàng)目已經(jīng)升級(jí)到了3.x 版本的 vue，官方建議使用計(jì)算屬性或方法代替被剔除的過(guò)濾器功能。

感謝各位的閱讀，以上就是“Vue中的過(guò)濾器如何聲明與使用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Vue中的過(guò)濾器如何聲明與使用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！