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 相关文章推荐
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
Nov 24 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
vue中动态绑定表单元素的属性方法
Feb 23 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
微信小程序+云开发实现欢迎登录注册
May 24 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
JavaScript 类的封装操作示例详解
May 16 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日期时间函数的高级应用技巧
2009/05/16 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
php生成RSS订阅的方法
2015/02/13 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
PHP多进程简单实例小结
2019/11/09 PHP
JavaScript 学习笔记一些小技巧
2010/03/28 Javascript
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
Python自动连接ssh的方法
2015/03/07 Python
python根据出生日期返回年龄的方法
2015/03/26 Python
在Python中marshal对象序列化的相关知识
2015/07/01 Python
Python每天必学之bytes字节
2016/01/28 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
教师开学感言
2014/02/14 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
二审答辩状范文
2015/05/22 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
python 如何用terminal输入参数
2021/05/25 Python