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. iOS 报错 :Duplicate interface definition for class’*'

    这个是重复导入引起的,但是一般的重复导入会在C里的include.而在项目中我们移动项目的位置,比如从某一文件夹移到另一文件夹,路径改变的话会导致项目的中预编译文件PrefixHeader.pch的路 ...

  2. 转行IT行业的心路历程3

    16年丝袜生意很差的一年,老板的态度也不好,大唐本地人太歧视外地人了.而且我干的不开心没有前途,不能体现自我价值,无论你怎么努力. IT技术行业却不是这样,只要你努力肯学习,一定会有回报的. 在16/ ...

  3. activity管理

    public class MainApp extends Application { private static ArrayList<WeakReference<Activity> ...

  4. 修改Eclipse的 workspace目录

    1.进入 Window > Preferences > General > Startup and Shutdown 选中 Prompt for workspace on start ...

  5. 一步一步hadoop安装

    部署hadoop集群 1.下载jdk1.6,从http://www.oracle.com/technetwork/java/javase/downloads/java-archive-download ...

  6. 爬虫爬数据时，post数据乱码解决办法

    最近在写一个爬虫,目标网站是:http://zx.bjmemc.com.cn/,可能是为了防止被爬取数据,它给自身数据加了密.用谷歌自带的抓包工具也不能捕获到数据.于是下了Fiddler.     F ...

  7. nginx实时记录请求状态信息( ngx_realtime_request_module)

    cd /usr/local/src/ wget "http://nginx.org/download/nginx-1.4.2.tar.gz" tar -xzvf nginx.tar ...

  8. 【转】C#Winform程序如何发布并自动升级（图解）

    有不少朋友问到C#Winform程序怎么样配置升级,怎么样打包,怎么样发布的,在这里我解释一下打包和发布关于打包的大家可以看我的文章C# winform程序怎么打包成安装项目(图解)其实打包是打包,发 ...

  9. 图解集合5：不正确地使用HashMap引发死循环及元素丢失

    问题引出 前一篇文章讲解了HashMap的实现原理,讲到了HashMap不是线程安全的.那么HashMap在多线程环境下又会有什么问题呢? 几个月前,公司项目的一个模块在线上运行的时候出现了死循环,死 ...

  10. 【案例分享】SQL job服务连接不到存储引擎

    在SQL Server agent的日志中发现有大量错误的信息,都是关于作业执行失败的日志 从日志的内容来看,是作业执行过程中无法连接到存储引擎, 可奇怪的是,存储引擎就是本机,而且已经正常启动了,截 ...