<body>
<div id="app">
<p>{{ msg | msgFormat('瘋狂', '123') | test }}</p>
</div>
<div id="app2">
<p>{{ msg | msgFormat('瘋狂', '123') | test }}</p>
</div>
<script>
Vue.filter('msgFormat', function (msg, data, data2) {
return msg.replace(/單純/g, data + data2)
})
Vue.filter('test', function(msg){
return msg + "========="
})
var vm = new Vue({
el: '#app',
data: {
msg: '曾經，我也是個單純的少年，單純的問誰是世界上最單純的男人',
},
methods: {},
})
var vm2 = new Vue({
el: '#app2',
data: {
msg: '曾經，我也是個單純的少年，單純的問誰是世界上最單純的男人',
},
methods: {},
filters: {
msgFormat: function(msg){
return msg.replace(/單純/g, '幼稚')
}
}
})
</script>
</body>
- 全局過濾器語法：
Vue.filter('過濾器的名稱', function(data){})，第一個參數永遠都是過濾器管道符前面傳遞過來的數據。
- 可以設置多個參數由前臺傳入，
Vue.filter('msgFormat', function (msg, data, data2)
- 全局過濾器，所有的Vue實例都能共享
- 可以使用多個過濾器
- 在Vue實例中，使用
filters屬性定義私有過濾器，定義私有過濾器有兩個條件，【過濾器名稱和處理函數】
- 過濾器調用的時候，採用的就是就近原則，如果私有過濾器和全局過濾器名稱一致，這時候優先調用私有過濾器
