最新Vue過(guò)濾器介紹及使用方法

更新時(shí)間：2022年11月03日 15:15:19 作者：亦世凡華

過(guò)濾器是vue為開發(fā)者提供的功能，常用于文本的格式化，過(guò)濾器應(yīng)該被添加在JavaScrip表達(dá)式的尾部，由“管道符”進(jìn)行調(diào)用，這篇文章通過(guò)案例給大家講解Vue過(guò)濾器介紹及使用方法，需要的朋友參考下吧

過(guò)濾器

過(guò)濾器的兼容性

注意：Vue3中明確取消了過(guò)濾器這個(gè)功能，如果想使用只能在Vue2中進(jìn)行，如果所做的項(xiàng)目是Vue2的話，可以了解一下這個(gè)功能點(diǎn)，至少會(huì)使用就行。

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

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

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

過(guò)濾器（Filters）是 vue 為開發(fā)者提供的功能，常用于文本的格式化。過(guò)濾器可以用在兩個(gè)地方：插值表達(dá)式和v-bind屬性綁定。過(guò)濾器應(yīng)該被添加在JavaScrip表達(dá)式的尾部，由“管道符”進(jìn)行調(diào)用，案例如下：

<body>
    <div id="root">
        <p>message的值是:{{message | capi}}</p>
    </div>
    <script src="vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#root",
            data:{
                message:"hello Vue.js"
            },
            //過(guò)濾器函數(shù)，必須定義到filters節(jié)點(diǎn)之下，過(guò)濾器本質(zhì)上是函數(shù)
            filters:{
                //注意：過(guò)濾器函數(shù)形參中的val，永遠(yuǎn)都是“管道符”前面的那個(gè)值
                capi(val){
                    // console.log(val);
                    // charAt()字符串方法，接收索引值，表示從字符串中把索引值對(duì)應(yīng)的字符獲取出來(lái)
                    const first = val.charAt(0).toUpperCase()
                    // slice()字符串方法1，可以截取字符串，從指定索引值往后截取
                    const other = val.slice(1)
                    //強(qiáng)調(diào)：過(guò)濾器中一定要有返回值
                    return first+other
                }
            }
        })
    </script>
</body>

私有過(guò)濾器和全局過(guò)濾器

在filters節(jié)點(diǎn)下定義的過(guò)濾器，稱為“私有過(guò)濾器”，因?yàn)樗荒茉诋?dāng)前vm實(shí)例所控制的el區(qū)域內(nèi)使用。如上面設(shè)置的過(guò)濾器就是私有過(guò)濾器；如果希望在多個(gè)vue實(shí)例之間共享過(guò)濾器，則可以按照如下的格式定義全局過(guò)濾器：

// 全局過(guò)濾器 - 獨(dú)立于每個(gè) vm 實(shí)例之外
// Vue.filter() 方法接收兩個(gè)參數(shù)
// 第一個(gè)參數(shù)：是全局過(guò)濾器的”名字“
// 第二個(gè)參數(shù)：是全局過(guò)濾器的”處理函數(shù)“
Vue.filter('capi',(str)=>{
    return str.charAt(0).toUpperCase() + str.slice(1)
})

承接上面的例子我們可以看看全局過(guò)濾器和私有過(guò)濾器的區(qū)別：

<body>
    <div id="root">
        <p>message的值 是:{{message | capi}}</p>
    </div>
    <div id="root1">
        <p>message的值 是:{{message | capi}}</p>
    </div>
    <script src="vue.js"></script>
    <script>
        // 提醒大家一下：全局過(guò)濾器要放在Vue實(shí)例化代碼前面，不然會(huì)報(bào)錯(cuò)
        Vue.filter('capi',(str)=>{
            // 為了區(qū)別全局過(guò)濾是否會(huì)對(duì)私有過(guò)濾進(jìn)行覆蓋，將全局過(guò)濾加一個(gè)特征
            return str.charAt(0).toUpperCase() + str.slice(1)+'~~~'
        })
        const vm = new Vue({
            el:"#root",
            data:{
                message:"hello Vue.js"
            },
            filters:{
                capi(val){
                    const first = val.charAt(0).toUpperCase()
                    const other = val.slice(1)
                    return first+other
                }
            }
        })
        const vm1 = new Vue({
            el:"#root1",
            data:{
                message:"hello world"
            },
        })
    </script>
</body>

注意點(diǎn)：

1）要定義到 filters 節(jié)點(diǎn)下，本質(zhì)是一個(gè)函數(shù)

2）在過(guò)濾器函數(shù)中，一定要有return值

3）在過(guò)濾器的形參中，就可以獲取到“管道符”前面待處理的那個(gè)值

4）如果全局過(guò)濾器和私有過(guò)濾器名字一致，按照就近原則，調(diào)用的是“私有過(guò)濾器”

過(guò)濾器的連續(xù)調(diào)用

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

//在插值表達(dá)式中可以使用多個(gè)過(guò)濾器如下：
//過(guò)濾器filterA從它前面的message得到的處理結(jié)果，將filterA的return返回值再交給filterB進(jìn)行處理
//最終把filterB處理的結(jié)果，作為最終的值渲染到頁(yè)面上
<div id="root">
    {{message | filterA | filterB}}
</div>

過(guò)濾器進(jìn)行傳參

過(guò)濾器本質(zhì)上是JavaScript函數(shù)，因此可以接收參數(shù)，格式如下：

<!-- arg1 和 arg2 是傳遞給 filterA 的參數(shù) -->
<p>{{ message | filterA(arg1,arg2) }}</p>
 
//過(guò)濾器處理函數(shù)的形參列表中:
//第一個(gè)參數(shù)：永遠(yuǎn)都是“管道符”前面待處理的值
//從第二個(gè)參數(shù)開始，才是調(diào)用過(guò)濾器時(shí)傳遞過(guò)來(lái)的 arg1 和 arg2 參數(shù)
Vue.filter('filterA',(msg,agr1,arg2)=>{
    //過(guò)濾器的代碼。。。
})

到此這篇關(guān)于最新Vue過(guò)濾器介紹及使用方法的文章就介紹到這了,更多相關(guān)vue過(guò)濾器使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: