查看“Vue从入门到实战:全局过滤器与局部过滤器”的源代码
←
Vue从入门到实战:全局过滤器与局部过滤器
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
==背景介绍== 在Vue.js中,过滤器主要用于文本的格式化,或者数组数据的过滤与排序等。从Vue.js 2.0.0版本开始,内置的过滤器被删除了,如果使用过滤器,需要自己编写 ==过滤器的分类== 过滤器本质上是一个函数,与自定义指令相似,过滤器也分为全局过滤器和局部过滤器。 ===全局过滤器=== 全局过滤器使用Vue.filter()方法来注册, Vue.filter(id,[definition]) ===局部过滤器=== 局部过滤器是在Vue实例的选项对象中使用filter选项来注册 ==举例== <nowiki><!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></nowiki> 注意: 1)当全局过滤器和局部过滤器重名时,会采用局部过滤器 2)全局过滤器可在任何Vue实例的模板中使用,而局部过滤器只能在该实例绑定的视图中使用。 3)过滤器可以用在两个地方:双花括号插值和 v-bind表达式,使用时通过管道符(|)添加到表达式的尾部使用。
返回至
Vue从入门到实战:全局过滤器与局部过滤器
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息