目錄

• 一.過濾器的概念
• 1.自定義一個全域性過濾器的格式
• 二、過濾器的呼叫方法
• 三.過濾器的注意事項
• 四、基本使用方法

一.過濾器的概念

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

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

Vue.filter('過濾器將來被呼叫時候的名稱',過濾器的處理函式)

二、過濾器的呼叫方法

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

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

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

三.過濾器的注意事項

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

四、基本使用方法

  <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源資料

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

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

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

Vue.filter("strFormat",function(data,str){ // 可以在data後面給個形參
            // 在過濾器中，必須要有返回值
            return data.replace(/悲觀/g,str)
            // 使用字串操作方法 replace 替換字http://www.cppcns.com符串內某些元素為其他元素，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',str="細心"){
            // 過濾器中必須有一個返回值
            return data.replace(/悲觀/g,str)
            // 使用字串操作方法 replace 替換字串內某些元素為其他元素，g 代表全域性匹配
        })

到此這篇關於 vue全域性過濾器概念及注意事項和基本使用方法的文章就介紹到這了,更多相關 vue全域性過濾器內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！