The filter defined under the filter node is called "private filter" because it can only be used in the el area controlled by the current vm instance.
If you want to share a filter among multiple vue instances, you can define a global filter in the following format:
<div id="app1">
<p>这是{{msg | toUpper}}</p>
</div>
<div id="app2">
<p>这是{{msg | capi}}</p>
</div>
<script>
// 在vue实例之外定义Vue.filter()全局过滤器
Vue.filter('capi',(str)=>{
const first=str.charAt(0).toUpperCase()
const others=str.slice(1)
return first+others
})
const vm1=new Vue({
el:'#app1',
data:{
msg:'hello vue.js'
},
// 定义私有过滤器
filters:{
toUpper(msg){
return msg.toUpperCase()
}
}
})
const vm2=new Vue({
el:'#app2',
data:{
msg:'vue.js'
}
})
</script>
Precautions for filter:
1. To be defined under the filters node, it is essentially a function.
2. There must be a return in the filter function.
3. In the filter parameter, you can get the value to be processed before the "pipe character"
4. If the global filter name is the same as the private filter name, then the "private filter" is called according to the proximity principle
