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>

第六节：Vue过滤器的用法和自定义过滤器的更多相关文章

  1. Web框架之Django_04 模板层了解（过滤器、标签、自定义过滤器、标签、inclusion_tag、模板的继承与导入）

    摘要: 模版层(模板语法) 模板语法 过滤器 标签 自定义过滤器.标签 inclusion_tag 模板的继承 模板的导入 一.模板语法: 常用语法:{{     }}    变量相关{% %}    ...

  2. Django自定义过滤器及标签

    一.自定义过滤器 1.自定义过滤器文件存放位置 在APP应用下创建名为templatetags(该文件夹名固定)的文件包(包含__init__.py文件) 注意APP必须在setting中注册 即在s ...

  3. Django 自定义过滤器

    设定自定义过滤器之前要现在配置文件内把自己项目名在 INSTALLED_APPS 内导入 #已安装的django应用 INSTALLED_APPS = [ 'django.contrib.admin' ...

  4. AngularJS中自定义过滤器

    AngularJS中为我们提供了一些内置的过滤器,这里列举一些自定义过滤器的场景. 自定义过滤器,不带参赛 //过滤 不带参赛 app.filter('ordinal', function () { ...

  5. hbase 自定义过滤器

    1.首先生成自定义过滤器,生成jar包,然后拷贝到服务器hbase目录的lib下. 1.1 自定义过滤器CustomFilter import com.google.protobuf.InvalidP ...

  6. django自定义过滤器和标签

    1.自定义过滤器和标签的流程: 1.在某个app下创建一个名为templatetags(必需,且包名不可变)的包.假设我们在名为app01的app下创建了一个templatetags的包,并在该包下创 ...

  7. Django模板之自定义过滤器/标签/组件

    自定义步骤: 1.     在settings中的INSTALLED_APPS配置当前app,不然django无法找到自定义的simple_tag. 2.     在app应用中创建templatet ...

  8. Spring Cloud Gateway自定义过滤器实战(观测断路器状态变化)

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  9. ASP.NET MVC深入浅出（被替换） 第一节: 结合EF的本地缓存属性来介绍【EF增删改操作】的几种形式 第三节: EF调用普通SQL语句的两类封装（ExecuteSqlCommand和SqlQuery ) 第四节: EF调用存储过程的通用写法和DBFirst模式子类调用的特有写法 第六节: EF高级属性(二) 之延迟加载、立即加载、显示加载(含导航属性) 第十节: EF的三种追踪

    ASP.NET MVC深入浅出(被替换)   一. 谈情怀-ASP.NET体系 从事.Net开发以来,最先接触的Web开发框架是Asp.Net WebForm,该框架高度封装,为了隐藏Http的无状态 ...

随机推荐

  1. 高速PCB之EMC设计47则

    高速PCB之EMC设计47则 差模电流和共模电流 辐射产生 电流导致辐射,而非电压,静态电荷产生静电场,恒定电流产生磁场,时变电流既产生电场又产生磁场.任何电路中存在共模电流和差模电流,差模信号携带数 ...

  2. datax+hadoop2.X兼容性调试

    以hdfsreader到hdfswriter为例进行说明: 1.datax的任务配置文件里需要指明使用的hadoop的配置文件,在datax+hadoop1.X的时候,可以直接使用hadoop1.X/ ...

  3. ButterKnife的原理简述

    ButterKnife的原理简述 注解处理器Java5 中叫APT(Annotation Processing Tool),在Java6开始,规范化为 Pluggable Annotation Pro ...

  4. Unity3d中Update()方法的替身

    在网上看到一些资料说Unity3d的Update方法是如何如何不好,影响性能.作为一个菜鸟,之前我还觉得挺好用的,完全没用什么影响性能的问题存在.现在发现确实有很大的问题,我习惯把一大堆检测判断放在U ...

  5. hdu 4698 - Counting(思路)

    转:题意:给定一个二维平面,其中x取值为1-N,y取值为1-M,现给定K个点,问至少包括K个点中的一个的满足要求的<Xmin, Xmax, Ymin, Ymax>共有多少中取值情况.也就是 ...

  6. 《理解 ES6》阅读整理：函数（Functions）（三）Function Constructor & Spread Operator

    增强的Function构造函数(Increased Capabilities of the Function Constructor) 在Javascript中Function构造函数可以让你创建一个 ...

  7. Android 环境搭建

    一.Android 环境搭建 开发工具: Android Studio(开发工具,前提是先装 java JDK) 下载地址:http://www.androiddevtools.cn/   Oracl ...

  8. Python学习笔记1——Python基础

    一． 数据类型和变量 整数:十六进制用0x前缀和0-9,a-f表示 浮点数:小数,科学计数法:10用e代替:整数和浮点数在计算机内部存储的方式是不同的,整数运算永远是精确的(包括除法),浮点数运算则可 ...

  9. Android 事件拦截机制一种粗鄙的解释

    对于Android事件拦截机制,相信对于大多数Android初学者是一个抓耳挠腮难于理解的问题.其实理解这个问题并不困难. 首先,你的明白事件拦截机制到底是怎么一回事?这里说的事件拦截机制,指的是对触 ...

  10. C# 轻量级ORM 编写思维

    目标: 降低研发人员门槛,提高效率,去除重复引用DLL的工作,基础配置由抽象工厂处理. 基础扩展 /// <summary> /// DataTable 转换为List 集合 /// &l ...