vue過濾器：

概念：vue.js允許你自定義過濾器可被用作一些常見文本的格式化。過濾器可以用在兩個地方：插值表達式 v-bind表達式 由管道符指示

//過濾器調用時候的格式
{{ name | 處理的函數名 }}
//可以通過Vue.filter來自定義過濾器  data就是管道符" | " 前面的內容，也就是name
Vue.filter(‘過濾器名稱‘，function(data){
　　　return data+‘hahahaha‘
})
//該過濾器就是為插值表達式的name自動加上hahahaha  最終在頁面上顯示 的是name的值hahahaha

//html 需求：使用過濾器把單純替換為天真
 
<div id="app">
　<p>{{msg | msgdeal}}</p>//管道符前面的值會傳遞給過濾器參數
　<p>{{msg | msgdealAuto(‘瘋狂‘，‘11222333‘)}}</p>//將某些目標替換為 瘋狂 管道符會被傳遞到過濾器第一個參數，過濾器參數會被傳遞到第二個參數

  <p>{{msg | msgdeal | test}}</p>//可以連續調用多個過濾器，msg先被msgdeal處理後 再接著被test過濾器處理 最後插值表達式的值是 曾經某人也是一個天真=====的少年，天真=====的認為~~~
</
 
div>

//script
<script>
　　//定義一個全局的過濾器 名字叫做 msgdeal
　　Vue.filter(‘msgdeal‘,function(msg){
　　　　return msg.replace(‘單純‘，‘天真‘) //這樣寫 只會替換第一個
　　　　//replace()的第一個參數不僅可以寫字符串，還可以定義一個正則表達式
　　　　return msg.replace(/單純/g,‘邪惡‘) //正則表達式 g全局匹配
　　})
　　Vue.filter(‘msgdealAuto‘,function(msg,arg,arg2){
　　　　return msg.replace(/單純/g, arg+arg2)
 
　　})
　　Vue.filter(‘test‘,function(msg){
　　　　return msg+‘=====‘
　　})　　

　　var vm = new Vue({
　　　　el:‘app‘,
　　　　data:{
　　　　　　msg:‘曾經某人也是一個單純的少年，單純的認為~~~‘
　　　　}
　　})
</script>

vue學習(十五) 過濾器簡單實用