在filter节点下定义的过滤器称为“私有过滤器”,因为它只能在当前vm实例所控制的el区域内使用。
如果希望在多个vue实例间共享过滤器,则可以按照如下的格式定义全局过滤器:
<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>
过滤器的注意点:
1.要定义到filters节点下,本质是一个函数。
2.在过滤器函数中一定要有一个return。
3.在过滤器形参中,就可以获取到“管道符”前面待处理的那个值
4.如果全局过滤器和私有过滤器名字一致,此时按照就近原则,调用的是“私有过滤器”