过滤器的概念
Vue.js允许你自定义过滤器,可被用作一些常见的文本格式化,过滤器可以用在两个地方:mustache 插值和 v-bind 表达式
过滤器应该被添加在JavaScript表达式的尾部,由“管道”符指示
过滤器调用时候的格式
{{name | 过滤器的名称}}
过滤器的定义语法
Vue.filter('过滤器的名称',function(){})
过滤器中的 function,第一个参数,已经被规定死了,永远都是 过滤器 管道符前面 传递过来的数据
Vue.filter('过滤器名称',function(data){
return data + '123'
})
全局过滤器 完整使用
<body>
<div id="app">
<!-- 可以调用多个过滤器 -->
<p>{{ msg | msgFormat('母后','123') | test}}</p>
</div>
<script>
// 定义一个Vue全局的过滤器,名字叫做 msgFormat
Vue.filter('msgFormat',function(msg,arg,arg2){
// 字符串的 replace 方法,第一个参数,除了可写一个 字符串 之外,还可以定义一个正则
return msg.replace(/魔镜/g,arg + arg2)
})
Vue.filter('test',function(msg){
return msg + '======='
})
var vm = new Vue({
el:'#app',
data:{
msg:'魔镜魔镜,谁是这世界上最美丽的女人,魔镜说当然是小鱼儿'
},
})
</script>
</body>