过滤器
概念：
Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示(" | ")；
分类：
过滤器分为全局过滤器和局部过滤器(私有过滤器)
1.全局过滤器
我们先通过案例来介绍下过滤器的使用，然后再看下何为全局过滤器
过滤器的语法
// 声明过滤器
Vue.filter("过滤器名称","回调函数")
1.简单过滤器的使用
我们先来看下过滤器的简单使用，如下是没有使用过滤器的情况
<body>
<div id="app">
<p>{{msg}}</p>
<p>{{ msg | msgFormat }}</p>
</div>
<script>
// 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
Vue.filter('msgFormat', function(msg){
// 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，
// 还可以定义一个正则
return msg.replace('单纯','低调')//只改第一个
return msg.replace(/单纯/g,'低调')//正则替换全部
});
var vm=new Vue({
el:'#app',
data:{
msg:'曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
},
methods:{}
});
</script>
</body>
效果：
2.过滤器传参数
在通过管道符号来使用过滤器的时候我们还可以传递参数过去，如下
<body>
<div id="app">
<p>{{msg}}</p>
<p>{{ msg | msgFormat('高调---') }}</p>
</div>
<script>
// 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
Vue.filter('msgFormat', function(msg,arg){
// 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，
// 还可以定义一个正则
return msg.replace(/单纯/g,arg)//正则替换全部
});
var vm=new Vue({
el:'#app',
data:{
msg:'曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
},
methods:{}
});
</script>
</body>
效果：
传多个参数
<body>
<div id="app">
<p>{{ msg | msgFormat('疯狂+1', '123') }}</p>
</div>
<script>
// 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
// 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
return msg.replace(/单纯/g, arg + arg2)
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
},
methods: {}
});
</script>
</body>
效果
3.多个过滤器同时使用
我们对一个信息处理的时候，可以同时使用多个管道符来调用多个过滤器来处理，如下
<body>
<div id="app">
<p>{{ msg | msgFormat('疯狂+1', '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 + '---过滤器test========'
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
},
methods: {}
});
</script>
</body>
效果：
4.何为全局过滤器
接下来我们看看什么是全局过滤器，其实我们上面定义的过滤器就是全局过滤器，我们在页面中再增加一个div和一个Vue对象，
<body>
<div id="app">
<p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p>
</div>
<div id="app2">
<p>{{ msg2 | msgFormat('疯狂+1', '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 + "---过滤器test========";
});
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: "#app",
data: {
msg:
"曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人"
},
methods: {}
});
// 创建 Vue 实例，得到 ViewModel
var vm2 = new Vue({
el: "#app2",
data: {
msg2:
"曾经，我也是一个单纯的孩子，单纯的我，傻傻的问，谁是世界上最单纯的娃娃"
},
methods: {}
});
</script>
</body>
效果：
通过以上效果我们也能看出来什么是全局的过滤器了，其实就是我们定义的过滤器可以被本页面中的多个Vue对象所使用
5.局部过滤器
相对于全局过滤器来说，局部过滤器就是只能够定义这个过滤器的Vue对象可以使用，具体步骤如下:
<body>
<div id="app">
<p>{{ msg | testFilter() }}</p>
</div>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: "#app",
data: {
msg:
"曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人"
},
methods: {},
filters:{
testFilter:function(msg){
return msg+"局部过滤器"
}
}
});
</script>
</body>
效果：
