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 日期时间函数(经典+完善+实用)
May 27 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
Dec 10 Javascript
javascript操作向表格中动态加载数据
Aug 27 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 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
【COS正片】蕾姆睡衣cos,纯洁可爱被治愈了 cn名濑弥七
2020/03/02 日漫
分享一个超好用的php header下载函数
2014/01/31 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
2020/02/01 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
python通过索引遍历列表的方法
2015/05/04 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
Python帮你识破双11的套路
2019/11/11 Python
python+OpenCV实现图像拼接
2020/03/05 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
出国英文推荐信
2014/05/10 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
学校证明范文
2015/06/24 职场文书
外科护士长工作总结
2015/08/12 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android