我们专注攀枝花网站设计 攀枝花网站制作 攀枝花网站建设
成都网站建设公司服务热线:400-028-6601

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

vue过滤器用法实例分析

本文实例讲述了vue过滤器用法。分享给大家供大家参考,具体如下:

我们提供的服务有:网站设计、成都网站建设、微信公众号开发、网站优化、网站认证、雷山ssl等。为超过千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的雷山网站制作公司

过滤器:

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}}

vue过滤器用法实例分析

时间转化器

{{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}}

希望本文所述对大家vue.js程序设计有所帮助。


当前文章:vue过滤器用法实例分析
网站链接:http://shouzuofang.com/article/jcdchh.html

其他资讯