vue全局過濾器概念及注意事項和基本使用方法

更新時間：2021年11月22日 09:21:44 作者：huxiaoxiao

這篇文章主要給大家分享了vue全局過濾器概念及注意事項和基本使用方法，下面文字圍繞vue全局過濾器的相關資料展開具體的詳細內容,需要的朋友可以參考一下，希望對你有所幫助

一.過濾器的概念

Vue.js允許你自定義過濾器，可被用作一些常見的文本格式化，過濾器可以用在兩個地方：mustache 插值和 v-bind 表達式

1.自定義一個全局過濾器的格式

Vue.filter('過濾器將來被調用時候的名稱',過濾器的處理函數(shù))

二、過濾器的調用方法

 <!-- 在調用過濾器是時候，需要使用 | 來調用， | 叫做管道符 -->
      <td>{{item.ctime | formatDate}}</td>

在過濾器的處理函數(shù)中，第一個形參作用是已經(jīng)被固定死的，永遠是管道符前面的值

//    這里的 data 就是管道符前面的 item.ctime 的值
Vue.filter('formatDate',function(data){

})
// 過濾器中必須有一個返回值

三.過濾器的注意事項

Vue.filter('過濾器的名稱',過濾器的處理函數(shù))
注意：過濾器的處理函數(shù)中，第一個形參，功能已經(jīng)被規(guī)定好了，永遠都是管道符前面的值
調用過濾器 {{item.ctime | formmatDate}}? 在調用過濾器是時候，需要使用 | 來調用， | 叫做管道符?
在調用過濾器的時候可以傳遞參數(shù)，{{item.ctime | formmatDate('傳遞參數(shù)')}}
注意：調用過濾器傳遞的參數(shù)，只能從從處理函數(shù)的第二個形參開始接收，因為第一個形參已經(jīng)被管道符前面的值占用了
注意：過濾器的處理函數(shù)中必須返回一個值
可以連續(xù)使用管道符調用多個過濾器，最終輸出的結果，永遠以最后一個過濾器為準
注意：過濾器只能使用在插值表達式或v-bind 中，不能使用在其他地方，比如 v-text 中

四、基本使用方法

在頁面上通過 vue 插值表達式在頁面上渲染一句話

  <div id="app">
        <h3>{{mes}}</h3>
    </div>

<script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                mes:"我是一個悲觀的人，悲觀的人做悲觀的事"
            }
        })
    </script>

要求：要求：把 “悲觀”這兩個字替換成"開朗"，前提是不可以更改? Vue中的mes源數(shù)據(jù)

先在script標簽中自定義一個全局過濾器,過濾器名稱自己起：

 Vue.filter('setStr',function(data){
        })

在過濾器中定義一個方法：

 Vue.filter('setStr',function(data){
            // 過濾器中必須有一個返回值
            return data.replace(/悲觀/g,'開朗')
            // 使用字符串操作方法 replace 替換字符串內某些元素為其他元素，g 代表全局匹配
        })

然后再插值表達式中調用過濾器

<div id="app">
        <h3>{{mes | setStr}}</h3>
    </div>

此時去頁面查看效果：

一個基本的過濾器就定義好了

我們還可以在過濾器函數(shù)中給上形參，不在方法中給定要替換的字符

Vue.filter("strFormat",function(data,str){ // 可以在data后面給個形參
            // 在過濾器中，必須要有返回值
            return data.replace(/悲觀/g,str)
            // 使用字符串操作方法 replace 替換字符串內某些元素為其他元素，g 代表全局匹配
        })

然后再調用時給上實參：

<div id="app">
        <h3>{{mes | setStr("粗心")}}</h3>
    </div>

查看結果：

也可以在形參里給上默認值，在調用時如果不給實參，則輸出默認值，如果給實參則輸出實參的值

<div id="app">
        <h3>{{mes | setStr}}</h3>
    </div>

    <script src="./js/vue.js"></script>
    <script>

        Vue.filter('setStr',function(data,str="細心"){
            // 過濾器中必須有一個返回值
            return data.replace(/悲觀/g,str)
            // 使用字符串操作方法 replace 替換字符串內某些元素為其他元素，g 代表全局匹配
        })

結果為：