vue 过滤器如何的使用

1.全局过滤器

2.私有过滤器

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>

    </head>

    <body>

        <div id="app">

            <!-- 1.过滤选择器基本使用,调用方法，默认传参msg {{name | 过滤选择器名称}} -->

            <p>{{msg | msgFormat1}}</p>

            <!-- 过滤选择器 可以传自己的参数-->

            <p>{{msg | msgFormat2("b")}}</p>

            <!-- 过滤选择器 可以多次调用-->

            <p>{{msg | msgFormat2("b") | other}}</p>

        </div>

        <script type="text/javascript">

            // 全局过滤选择器 ，msg 默认传过来的参数

            Vue.filter("msgFormat1",function(msg){

                return msg+"aa"

            })

            Vue.filter("msgFormat2",function(msg,b){

                // 可以加正则表达式 /2/g 全局匹配

                return msg.replace(/2/g,"a"+b)

            })

            Vue.filter("other",function(msg){

                // 调用完msgFormat2 再调用other

                return msg+" over"

            })

            var vm=new Vue({

                el:"#app",

                data:{

                    msg:"123412341234"

                },

                methods:{

                },

                filters:{//定义 私有过滤器

                    msgFormat1:function(msg){//同样的过滤器msgFormat1 优先调用私有过滤器

                        return `${msg}bb`;//ES6字符串连接方法

                    }

                }

            })

        </script>

    </body>

</html>

学习vue第七节，filter过滤器如何的使用的更多相关文章

  1. javaweb学习总结(四十二)——Filter(过滤器)学习

    一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态 ...

  2. javaWeb学习总结（10）- Filter(过滤器)学习

    一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有 web资源:例如Jsp, Servlet, 静 ...

  3. javaweb学习总结(四十六)——Filter(过滤器)常见应用

    一.统一全站字符编码 通过配置参数charset指明使用何种字符编码,以处理Html Form请求参数的中文问题 1 package me.gacl.web.filter; 2 3 import ja ...

  4. javaWeb学习总结（10）- Filter(过滤器)常见应用(3)

    一.统一全站字符编码 通过配置参数charset指明使用何种字符编码,以处理Html Form请求参数的中文问题 package me.gacl.web.filter; import java.io. ...

  5. javaWeb学习总结（10）- Filter(过滤器)学习（2）

    在filter中可以得到代表用户请求和响应的request.response对象,因此在编程中可以使用Decorator(装饰器)模式对request.response对象进行包装,再把包装对象传给目 ...

  6. JavaWeb学习（二十三）———Filter(过滤器)

    一.Filter简介 Filter也称之为过滤器,它是Servlet技术中最激动人心的技术,WEB开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态 ...

  7. shiro框架学习-6-Shiro内置的Filter过滤器及数据加解密

    1.  shiro的核心过滤器定义在枚举类DefaultFilter 中,一共有11个 ,配置哪个路径对应哪个拦截器进行处理 // // Source code recreated from a .c ...

  8. Java Web学习总结（12）Filter过滤器

    一,Filter简介 Filter也称之为过滤器,Filter是对客户端访问资源的过滤,符合条件放行,不符合条件不放行,并且可以对目标资源访问前后进行逻辑处理. 二,Filter开发步骤 1)编写一个 ...

  9. 学习vue第六节，v-if和v-show

    vue 中的v-if和v-show <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

随机推荐

  1. 《深入理解 Java 虚拟机》读书笔记：垃圾收集器与内存分配策略

    正文 垃圾收集器关注的是 Java 堆和方法区,因为这部分内存的分配和回收是动态的.只有在程序处于运行期间时才能知道会创建哪些对象,也才能知道需要多少内存. 虚拟机栈和本地方法栈则不需要过多考虑回收的 ...

  2. hibernate.current_session_context_class 比较权威的解释

    hibernate.current_session_context_class 博客分类: hibernate HibernateSpring多线程配置管理thread  遇到过的问题: 情景1: 在 ...

  3. 用Python画的，5 种非传统的可视化技术，超炫酷的动态图

    数据可以帮助我们描述这个世界.阐释自己的想法和展示自己的成果,但如果只有单调乏味的文本和数字,我们却往往能难抓住观众的眼球.而很多时候,一张漂亮的可视化图表就足以胜过千言万语.本文将介绍 5 种基于 ...

  4. 数据结构之栈—强大的四则复杂运算计算器(超过windows自带的科学计算器)【中缀转后缀表达式】

    比windows自带计算器还强的四则复杂运算计算器! 实测随机打出两组复杂算式:-7.5 * 6 / ( -2 + ( -6.5 -  -5.22 ) )与7.5+-3*8/(7+2) windows ...

  5. E2. Send Boxes to Alice (Hard Version)

    秒的有点难以理解:https://blog.csdn.net/weixin_42868863/article/details/103200132 #include<bits/stdc++.h&g ...

  6. SpringBoot 集成 Elasticsearch

    前面在 ubuntu 完成安装 elasticsearch,现在我们SpringBoot将集成elasticsearch. 1.创建SpringBoot项目 我们这边直接引入NoSql中Spring ...

  7. vue2.x学习笔记（十八）

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12629705.html. 处理边界情况 这里记录的都是和处理边界情况有关的功能,即一些需要对vue的规则做一些小调 ...

  8. Java中常用的七个阻塞队列第二篇DelayQueue源码介绍

    Java中常用的七个阻塞队列第二篇DelayQueue源码介绍 通过前面两篇文章,我们对队列有了了解及已经认识了常用阻塞队列中的三个了.本篇我们继续介绍剩下的几个队列. 本文主要内容:通过源码学习De ...

  9. [linux][mysql] 命令更改表结构：添加、删除、修改字段、调整字段顺序

    原文出处:http://www.phpernote.com/MySQL/1120.html 查看表结构: desc tabl_name; show columns fromtable_name: 常用 ...

  10. redis的多路复用是什么鬼

    有没有人和我一样, 自打知道了redis, 就一直听说什么redis单线程, 使用了多路复用等等. 天真的我以为多路复用是redis实现的技术. 今天才发现, 我被自己骗了, 多路复用是系统来实现的. ...