Vue从入门到实战:全局过滤器与局部过滤器
来自CloudWiki
背景介绍
在Vue.js中,过滤器主要用于文本的格式化,或者数组数据的过滤与排序等。从Vue.js 2.0.0版本开始,内置的过滤器被删除了,如果使用过滤器,需要自己编写
过滤器的分类
过滤器本质上是一个函数,与自定义指令相似,过滤器也分为全局过滤器和局部过滤器。
全局过滤器
全局过滤器使用Vue.filter()方法来注册,
Vue.filter(id,[definition])
局部过滤器
局部过滤器是在Vue实例的选项对象中使用filter选项来注册
举例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id = "app"> <p>{{message | capitalize}}</p> </div> <script src="vue.js"></script> <script> Vue.filter('capitalize', function (value) { if (!value) return ''; value = value.toString(); return value.charAt(0).toUpperCase() + value.slice(1); }) var vm = new Vue({ el: '#app', data: { message: 'hello world' }, /*filters: { capitalize: function (value) { if (!value) return ''; value = value.toString(); return value.charAt(0).toUpperCase() + value.slice(1); } }*/ }); </script> </body> </html>
注意:
1)当全局过滤器和局部过滤器重名时,会采用局部过滤器
2)全局过滤器可在任何Vue实例的模板中使用,而局部过滤器只能在该实例绑定的视图中使用。
3)过滤器可以用在两个地方:双花括号插值和 v-bind表达式,使用时通过管道符(|)添加到表达式的尾部使用。