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 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
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
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
php微信支付接口开发程序
2016/08/02 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
javascript静态的url如何传递
2007/05/03 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
Javascript 严格模式use strict详解
2017/09/16 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python生成1行四列全2矩阵的方法
2018/08/04 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
通过代码实例了解Python异常本质
2020/09/16 Python
python如何快速拼接字符串
2020/10/28 Python
Python 实现进度条的六种方式
2021/01/06 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
俄罗斯第一家多品牌在线奢侈品精品店:Aizel.ru
2020/09/06 全球购物
员工自我鉴定
2013/10/09 职场文书
测试工程师岗位职责
2013/11/28 职场文书
机关门卫制度
2014/02/01 职场文书
亲戚结婚的请假条
2014/02/11 职场文书
资源工程专业毕业生求职信
2014/02/27 职场文书
见义勇为事迹材料
2014/12/24 职场文书
车位出租协议书范本
2016/03/19 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android