过滤器(Filters)是 vue 为开发者提供的功能,用于文本的格式化。
【Vue2 可用,Vue3 已经弃用】
过滤器可以用在两个地方:
插值表达式
v-bind 属性绑定
过滤器应该被添加在 JavaScript 表达式的尾部,由“管道符 |
”进行调用
<body><div id="app"><p>message : {{ message | capi }}</p></div><script src="./lib/vue.js"></script><script>const vm = new Vue({el: '#app',data:{message: 'hello vue filters'},// 过滤器filters:{// val 就是 | 前面的 messagecapi(val){// 过滤器一定要由返回值return val.charAt(0).toUpperCase() + val.slice(1);}}})</script>
</body>
私有过滤器和全局过滤器
在 filters 节点下定义的过滤器,称为“私有过滤器”,因为它只能在当前 vm 所控制的 el 区域内使用。
若需要在多个 vue 实例之间共享过滤器,则可以按照如下格式定义全局过滤器:
Vue.filters('capitalize',(str) => {return str.chatAt(0).toUpperCase() + str.slice(1) + '--'
})
若全局过滤器与私有过滤器名称一致,按照就近原则,调用私有过滤器
一 叶 知 秋,奥 妙 玄 心