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. sass基本用法(转载)

    SASS入门教程及用法指南 2014年8月27日 8489次浏览 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家都知道,js中可以自定义变量,css仅仅是一个标记语言,不是 ...

  2. （转）深度分析Linux下双网卡绑定七种模式

    现在一般的企业都会 使用双网卡接入,这样既能添加网络带宽,同时又能做相应的冗余,可以说是好处多多.而一般企业都会使用linux操作系统下自带的网卡绑定模式,当然现在 网卡产商也会出一些针对window ...

  3. c# WebBrower 与 HttpRequest配合 抓取数据

    今天研究一个功能,发现一个问题. 通过webbrower模拟用户自动登录可以完成,并且可以取到相对应的页面内容. 但是如果页面中通过ajax,动态加载的内容,这种方式是取不到的,于是用到了httpRe ...

  4. FMDB读取Datetime类型值为1970的问题

    1.问题 今天使用FMDB做一个例子程序,新建的一张表有一个datetime字段,数据库有默认值,大概如下 CREATE TABLE [ConsumptionType] ([id] INTEGER P ...

  5. dom解析xml

    <?xml version="1.0" encoding="UTF-8"?><ShowList> <Movie>  < ...

  6. android开发中监控android软件网络请求的软件Charles使用入门

    1.下载并安状软件,官网在此: http://www.charlesproxy.com/ 2.前题条件,电脑和手机必须在同一网段 3.在Charles界面选择菜单 proxy->proxy se ...

  7. IO-01. 表格输出(5)

    本题要求编写程序,按照规定格式输出表格. 输入格式: 本题目没有输入. 输出格式: 要求严格按照给出的格式输出下列表格: ------------------------------------ Pr ...

  8. jpa更新数据出错

    在更新表的一条记录时出错,错误为“java.sql.SQLException: Field 'is_del' doesn't have a default value”,表有一个属性isDel为Boo ...

  9. RCP: JDT 根据org.eclipse.jdt.core.IJavaElement对象获取org.eclipse.jdt.core.dom.ASTNode对象

    JDT中有两套Java文件模型映射. 其核心类\接口分别为: org.eclipse.jdt.core.IJavaElement和org.eclipse.jdt.core.dom.ASTNode IJ ...

  10. 压力测试工具ab使用

    ab全名是apache bench,是apache自带的一款压力测试工具.它通过创建多个线程来模拟并发,测试目标是基于URL的,因此不论是什么web服务器都可以支持. 使用ab非常简单,进入apach ...