vue全局過濾器基本使用方法是什么

本篇內容介紹了“vue全局過濾器基本使用方法是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

一.過濾器的概念

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

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

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

二、過濾器的調用方法

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

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

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

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

三.過濾器的注意事項

• Vue.filter('過濾器的名稱',過濾器的處理函數)

• 注意：過濾器的處理函數中，第一個形參，功能已經被規定好了，永遠都是 管道符 前面的值

• 調用過濾器 {{item.ctime | formmatDate}}  在調用過濾器是時候，需要使用 | 來調用， | 叫做管道符 

• 在調用 過濾器的時候可以傳遞參數，{{item.ctime | formmatDate('傳遞參數')}}

• 注意：調用過濾器傳遞的參數，只能從 從處理函數的第二個 形參開始接收，因為第一個形參已經被 管道符 前面的值占用了

• 注意：過濾器的處理函數中必須返回一個值

• 可以連續使用管道符 調用多個過濾器，最終輸出的結果，永遠以最后一個過濾器為準

• 注意：過濾器只能使用在 插值表達式或v-bind 中，不能使用在其他地方，比如 v-text 中

四、基本使用方法

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

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

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

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

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

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

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

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

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

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

此時去頁面查看效果：

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

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

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

然后再調用時給上實參：

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

查看結果：

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

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

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

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

結果為：

“vue全局過濾器基本使用方法是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！