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

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

过滤器:

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

 

 

 

 

 

 

   

   

    {{msg | filterHtml}}

 

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