快捷導(dǎo)航

最新Vue過濾器介紹及使用方法

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

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

過濾器

過濾器的兼容性

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

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

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

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

過濾器（Filters）是 vue 為開發(fā)者提供的功能，常用于文本的格式化。過濾器可以用在兩個地方：插值表達(dá)式和v-bind屬性綁定。過濾器應(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"
            },
            //過濾器函數(shù)，必須定義到filters節(jié)點(diǎn)之下，過濾器本質(zhì)上是函數(shù)
            filters:{
                //注意：過濾器函數(shù)形參中的val，永遠(yuǎn)都是“管道符”前面的那個值
                capi(val){
                    // console.log(val);
                    // charAt()字符串方法，接收索引值，表示從字符串中把索引值對應(yīng)的字符獲取出來
                    const first = val.charAt(0).toUpperCase()
                    // slice()字符串方法1，可以截取字符串，從指定索引值往后截取
                    const other = val.slice(1)
                    //強(qiáng)調(diào)：過濾器中一定要有返回值
                    return first+other
                }
            }
        })
    </script>
</body>

私有過濾器和全局過濾器

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

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

承接上面的例子我們可以看看全局過濾器和私有過濾器的區(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>
        // 提醒大家一下：全局過濾器要放在Vue實(shí)例化代碼前面，不然會報(bào)錯
        Vue.filter('capi',(str)=>{
            // 為了區(qū)別全局過濾是否會對私有過濾進(jìn)行覆蓋，將全局過濾加一個特征
            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ì)是一個函數(shù)

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

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

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

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

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

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

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

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

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

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

您可能感興趣的文章: