今天就跟大家聊聊有關vue中過濾器的原理是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
過濾器實質(zhì)不改變原始數(shù)據(jù)，只是對數(shù)據(jù)進行加工處理后返回過濾后的數(shù)據(jù)再進行調(diào)用處理。我們看一下官方的定義：vue.js允許你自定義過濾器，可被用于一些常見的文本格式化。過濾器可以用在兩個地方：雙花括號插值和v-bind表達式(后者從2.1.0+開始支持)。
關于vue過濾器的原理解析
過濾器應該被添加在JavaScript表達式的尾部，由“管道”符號指示:
{{message|capitalize}}
你可以在一個組件的選項中定義本地的過濾器：
filters:{
capitalize:function(value){
if(!value)return''
value=value.toString()
returnvalue.charAt(0).toUpperCase()+value.slice(1)
}
}
或者在創(chuàng)建vue實例之前全局定義過濾器：
vue.filter('capitalize',function(value){
if(!value)return''
value=value.toString()
returnvalue.charAt(0).toUpperCase()+value.slice(1)
})
newvue({
//...
})
過濾器原理是什么
過濾器函數(shù)總接收表達式的值(之前的操作鏈的結(jié)果)作為第一個參數(shù)。在上述例子中，capitalize過濾器函數(shù)將會收到message的值作為第一個參數(shù)。過濾器可以串聯(lián)：
{{message|filterA|filterB}}
在這個例子中，filterA被定義為接收單個參數(shù)的過濾器函數(shù)，表達式message的值將作為參數(shù)傳入到函數(shù)中。然后繼續(xù)調(diào)用同樣被定義為接收單個參數(shù)的過濾器函數(shù)filterB，將filterA的結(jié)果傳遞到filterB中。
過濾器是JavaScript函數(shù)，因此可以接收參數(shù)：
{{message|filterA('arg1',arg2)}}
這里，filterA被定義為接收三個參數(shù)的過濾器函數(shù)。其中message的值作為第一個參數(shù)，普通字符串‘a(chǎn)rg1’作為第二個參數(shù)，表達式arg2的值作為第三個參數(shù)。
看完上述內(nèi)容，你們對vue中過濾器的原理是什么有進一步的了解嗎？如果還想了解更多知識或者相關內(nèi)容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。
重慶分公司
重慶分公司
