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 相关文章推荐
JavaScript Archive Network 集合
May 12 Javascript
JAVASCRIPT  THIS详解 面向对象
Mar 25 Javascript
javascript 类方法定义还是有点区别
Apr 15 Javascript
javascript 通用简单的table选项卡实现
May 07 Javascript
容易被忽略的JS脚本特性
Sep 13 Javascript
js 函数调用模式小结
Dec 26 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
Vue.js基础知识小结
Jan 13 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 Javascript
vue组件创建的三种方式小结
Feb 03 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
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
浅谈JavaScript之事件绑定
2013/07/08 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
浅谈Vuex的状态管理(全家桶)
2017/11/04 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
浅谈python多线程和队列管理shell程序
2015/08/04 Python
详解MySQL数据类型int(M)中M的含义
2016/11/20 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
对Python中画图时候的线类型详解
2019/07/07 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
python字符串判断密码强弱
2020/03/18 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
JNI的定义
2012/11/25 面试题
医学生个人求职信范文
2013/09/24 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
2014年信访工作总结
2014/11/17 职场文书
给老师的一封感谢信
2015/01/20 职场文书