Vue-全局过滤器的基本使用
2018-12-24 本文已影响0人
小鱼儿_逆流而上
过滤器的概念
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>
