Vue过滤器的用法和自定义过滤器使用


Posted in Javascript onFebruary 08, 2017

1、过滤器的用法,用  ‘|' 分割表达式和过滤器。

例如:{{ msg |  filter}}     {{msg | filter(a)}}  a就标识filter的一个参数。

用两个过滤器:{{msg | myfilter | myfilternumber }}

2、自定义的过滤器

过滤器的结构为:Vue.filter("id",function(value,a){});

value是过滤器的一个参数,也是默认的原始值。a是自定义的一个参数。

自定义过滤器的例子:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="vue.js"></script>
  <style>

  </style>
</head>

<body>
  <div id="app">
    <!--输出的字符串中a的个数-->
    <span>msg的值:{{msg}},其中a的个数:</span> {{msg | myfilter('a')}}
    <br>
    <!--输出的字符串中b的个数-->
    <span>msg的值:{{msg}},其中b的个数:</span> {{msg | myfilter | myfilternumber}}

  </div>
</body>
<script type="text/javascript">
  Vue.filter("myfilter", function(value, arg) {
    //返回一个对象或者json字符串,列出字符串中的字符以及字符的个数,不区分大小写
    var obj = {};
    var s = value.split('').sort().join("");
    var reg = /(.)\1+/ig;
    var str = s.replace(reg, "$1"); //字符串去重后的结果
    var i = 0,
      n,
      a;
    while (s.length > 0) {
      a = str.charAt(i);
      n = s.lastIndexOf(a) + 1;
      obj[a] = n;
      s = s.substring(n);
      i++;
    }
    return arg ? obj[arg] : obj;
  });
  Vue.filter("myfilternumber", function(value) {
    return value.b;
  });
  var app1 = new Vue({
    el: "#app",
    data: {
      msg: "a1a1aba2babac"

    },
    methods: {

    }
  });
</script>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
JavaScript 中的事件教程
Apr 05 Javascript
比较详细的javascript对象的property和prototype是什么一种关系
Aug 06 Javascript
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
Jan 15 Javascript
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 Javascript
Javascript中的神器——Promise
Feb 08 #Javascript
jquery获取下拉框中的循环值
Feb 08 #Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 #Javascript
jQuery实现标签页效果实战(4)
Feb 08 #Javascript
Angular.JS实现无限级的联动菜单(使用demo)
Feb 08 #Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 #Javascript
jQuery实现级联下拉框实战(5)
Feb 08 #Javascript
You might like
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
php判断并删除空目录及空子目录的方法
2015/02/11 PHP
PHP实现唤起微信支付功能
2019/02/18 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
强制设为首页代码
2006/06/19 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
jQuery检测返回值的数据类型
2015/07/13 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
javascript基础知识
2016/06/07 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
详解jquery和vue对比
2019/04/16 jQuery
node基于async/await对mysql进行封装
2019/06/20 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
vue实现购物车案例
2020/05/30 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
使用requests库制作Python爬虫
2018/03/25 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
python实现小世界网络生成
2019/11/21 Python
基于Pytorch SSD模型分析
2020/02/18 Python
详解Python设计模式之策略模式
2020/06/15 Python
python实现xlwt xlrd 指定条件给excel行添加颜色
2020/07/14 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
英文请假条
2014/04/11 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
交通违章检讨书
2014/09/21 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
介绍信格式
2015/01/30 职场文书
525心理健康活动总结
2015/05/08 职场文书
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL