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

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>