扣丁学堂HTML5培训之vue过滤器用法实例分析

今天扣丁学堂HTML5培训老师给大家分享一篇关于vue过滤器用法实例分析详解，结合实例形式总结分析了vue.js常见过滤器相关使用技巧与操作注意事项，下面我们一起来看一下吧。

HTML5培训

过滤器:

vue提供过滤器:

capitalize uppercase currency....

 {{msg|currency ￥}}
 

debounce 配合事件，延迟执行

 
 

数据配合使用过滤器:

limitBy限制几个

limitBy参数(取几个)

limitBy取几个从哪开始

 

 
 

 {{val}}
 

 

 

  

 

 {{val}}
 

 

 

 

filterBy过滤数据

filterBy'谁'

 
 

 

 {{val}}
 

 

 

 

orderBy排序

orderBy谁1/-1

1->正序

2->倒序

 
 

 

 {{val}} 

 

 

 

 

自定义过滤器:model->过滤->view

Vue.filter(name,function(input){
});

 {{a | toDou 1 2}}
 

 

时间转化器

 {{a | date}}
 

 

过滤html标记

双向过滤器:*

Vue.filter('filterHtml',{
　　read:function(input){ //model-view
　　　　return input.replace(//g,'');
　　},
　　write:function(val){ //view -> model
　　　　return val;
　　}
});

数据->视图

model->view

view->model

 
 <title>
 
 
 


 

 
 

 {{msg | filterHtml}}
 

以上就是关于扣丁学堂HTML5培训之vue过滤器用法实例分析的详细介绍，希望对大家的学习有所帮助，想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导，此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。

H5进阶课程：https://ke.qq.com/course/387348?flowToken=1008605【扫码进入前端H5架构师进阶VIP体验课】

H5基础课程：https://ke.qq.com/course/320523?flowToken=1008606【扫码进入HTML5前端开发VIP免费公开课】

閱讀更多 扣丁學堂 的文章

關鍵字: HTML5 扣丁 虚拟机