過濾器
概念：
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>
效果：
