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. 黑马程序员_Java基础：网络编程总结

    ------- android培训.java培训.期待与您交流! ---------- Java语言是在网络环境下诞生的,它是第一个完全融入网络的语言,虽然不能说它是对支持网络编程做得最好的语言,但是 ...

  2. python学习粘贴

    1. Python通过re模块提供对正则表达式的支持.使用re的一般步骤是先使用re.compile()函数,将正则表达式的字符串形式编译为Pattern实例,然后使用Pattern实例处理文本并获得 ...

  3. Web大文件上传控件-jsp-sql示例更新-Xproer.HttpUploader6.2

    版权所有 2009-2016荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  4. ubuntu上搭建review board代码评审站点

    Reviewboard是一个开源个人可以免费使用的代码评审框架,貌似现在有越来越多的公司也开始使用reviewboard作为公司的代码评审工具. 今天早上试了一下,搭建过程非常方便简单,按照网页提示即 ...

  5. java基础3_流程控制语句

    一 条件判断 1. 条件运算符(三元表达式) ,其形式为: type d = a ? b : c; 具体化形式为:int d = 2 < 1 ? 3 : 4; 2. 轻量级的文本编辑器:Ultr ...

  6. RHEL6.5 删除桌面启动器（计算机/Home/回收站）

    首先,安装gconf-editor以获得gconftool-2命令 终端命令: gconftool-2 --set /apps/nautilus/desktop/computer_icon_visib ...

  7. MVVM框架中的一个非常重要的内容：数据双向绑定

    双向绑定的意思就是,如下图中,当在input框中输入字符时,红色框框中的字也会随之改变. input框中需要一个绑定:ms-duplex(即“双工绑定”),http://avalonjs.github ...

  8. Ubuntu NFSserver 简易安装及使用

    服务器端(ip:192.168.1.100): sudo apt-get install nfs-kernel-server #安装nfs 客户端(ip:192.168.1.110): sudo ap ...

  9. 关于提高webview里下载apk安装包成功率的研究

    移动互联网发展到当下,各种领域出现了一些大的app平台,这些app共同的特点就是拥有大量忠实活跃用户, 要知道,有用户就有money啊~ 于是乎其他不太知名的平台,开始在他们上面疯狂投放广告,做活动推 ...

  10. 在 Cloud 9 中搭建和运行 Go

    简介 自从使用了Chromebook,我脑中一直充斥着在云端开发的念头.在我使用过的位数不多的在线开发环境中,唯有 Cloud 9令我比较满意.实际上,Cloud 9还不支持Go的开发,因此本文我将教 ...