vue中過濾器的原理是什么

今天就跟大家聊聊有關vue中過濾器的原理是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

　　過濾器實質不改變原始數據，只是對數據進行加工處理后返回過濾后的數據再進行調用處理。我們看一下官方的定義：vue.js允許你自定義過濾器，可被用于一些常見的文本格式化。過濾器可以用在兩個地方：雙花括號插值和v-bind表達式(后者從2.1.0+開始支持)。

　　關于vue過濾器的原理解析

　　過濾器應該被添加在JavaScript表達式的尾部，由“管道”符號指示:

　　<!--在雙花括號中-->

　　{{message|capitalize}}

　　<!--在`v-bind`中-->

　　<divv-bind:id="rawId|formatId"></div>

　　你可以在一個組件的選項中定義本地的過濾器：

　　filters:{

　　capitalize:function(value){

　　if(!value)return''

　　value=value.toString()

　　returnvalue.charAt(0).toUpperCase()+value.slice(1)

　　}

　　}

　　或者在創建vue實例之前全局定義過濾器：

　　vue.filter('capitalize',function(value){

　　if(!value)return''

　　value=value.toString()

　　returnvalue.charAt(0).toUpperCase()+value.slice(1)

　　})

　　newvue({

　　//...

　　})

　　過濾器原理是什么

　　過濾器函數總接收表達式的值(之前的操作鏈的結果)作為第一個參數。在上述例子中，capitalize過濾器函數將會收到message的值作為第一個參數。過濾器可以串聯：

　　{{message|filterA|filterB}}

　　在這個例子中，filterA被定義為接收單個參數的過濾器函數，表達式message的值將作為參數傳入到函數中。然后繼續調用同樣被定義為接收單個參數的過濾器函數filterB，將filterA的結果傳遞到filterB中。

　　過濾器是JavaScript函數，因此可以接收參數：

　　{{message|filterA('arg1',arg2)}}

　　這里，filterA被定義為接收三個參數的過濾器函數。其中message的值作為第一個參數，普通字符串‘arg1’作為第二個參數，表達式arg2的值作為第三個參數。

看完上述內容，你們對vue中過濾器的原理是什么有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。