开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第31天,点击查看活动详情
过滤器
局部过滤器
-
定义方式
可以在默认返回的组件对象中通过filters中注册一个私有过滤器
定义格式: export default { el:'#app', filters:{ '过滤器名称':function(管道符号|左边对象的值,参数1,参数2,....) { return 对管道符号|左边参数的值做处理以后的值 }) } }; Vue2.0 调用过滤器传参写法: {{ msg | 过滤器名称('参数1','参数2' ....) }}
-
(应用示例)自定义局部过滤器实现日期格式化
1、 定义私有的日期格式化过滤器:
export default { el:'#app', data:{ time:new Date() }, filters:{ //定义在 VM中的filters对象中的所有过滤器都是私有过滤器 datefmt:function(input,splicchar){ var date = new Date(input); var year = date.getFullYear(); var m = date.getMonth() + 1; var d = date.getDate(); var fmtStr = year+splicchar+m +splicchar+d; return fmtStr; //返回输出结果 } } });
2、使用
<div id="app"> {{ time | datefmt('-') }} //Vue2.0传参写法 </div>
全局过滤器
-
定义方式
可以用全局方法 Vue.filter() 注册一个全局自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数。过滤器函数以值为参数,返回转换后的值
定义格式:
Vue.filter('过滤器名称', function (管道符号|左边参数的值,其他参数1,其他参数2,....) { return 对管道符号|左边参数的值做处理以后的值 })
Vue2.0 使用:参数调用时用(),多个参数中间使用逗号分开
{{ msg | 过滤器名称('参数1','参数2' ....) }}
-
(应用示例)自定义全局过滤器实现日期格式化
1、 定义全局的日期格式化过滤器:
Vue.filter('datefmt',function(input,splicchar){ var date = new Date(input); var year = date.getFullYear(); var m = date.getMonth() + 1; var d = date.getDate(); var fmtStr = year+splicchar+m +splicchar+d; return fmtStr; //返回输出结果 });
2、使用
<div id="app"> {{ time | datefmt('-') }} //Vue2.0传参写法 </div> <script> new Vue({ el:'#app1', data:{ time:new Date() } }); </script>