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 相关文章推荐
js 提交和设置表单的值
Dec 19 Javascript
javascript 解析url的search方法
Feb 09 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
JavaScript转换农历类实现及调用方法
Jan 27 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
微信小程序实现列表的横向滑动方式
Jul 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
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
php 动态多文件上传
2009/01/18 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
PHP图片水印类的封装
2017/07/06 PHP
PHP实现的服务器一致性hash分布算法示例
2018/08/09 PHP
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
Python2与Python3的区别详解
2020/02/09 Python
python实现猜拳游戏
2020/03/04 Python
css3 border-radius属性详解
2017/07/05 HTML / CSS
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
学习雷锋精神演讲稿
2014/05/10 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
二审代理词范文
2015/05/25 职场文书
立案决定书范文
2015/06/24 职场文书
车间班组长竞聘书
2015/09/15 职场文书
高中历史教学反思
2016/02/19 职场文书