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. dp优化---四边形不等式与决策单调性

    四边形不等式 定理1: 设w(x,y)为定义在整数集合上的二元函数,若存在任意整数a,b,c,d(a<=b<=c<=d),并且w(a,d)+w(b,c)>=w(a,c)+w(b ...

  2. hadoop(七)集群配置同步（hadoop完全分布式四）|9

    前置配置:rsync远程同步|xsync集群分发(hadoop完全分布式准备三)|9 1. 分布式集群分配原则 部署分配原则 说明Namenode和secondarynamenode占用内存较大,建议 ...

  3. layoutInflater参数解析与源码分析

    关于LayoutInflater方法,无论是在listview的适配器中,还是在动态添加view的时候,都会出现它的身影,最开始我在看<第一行代码>时,不知道这个方法实际的参数到底指的是什 ...

  4. 【spring 国际化】springMVC、springboot国际化处理详解

    在web开发中我们常常会遇到国际化语言处理问题,那么如何来做到国际化呢? 你能get的知识点? 使用springgmvc与thymeleaf进行国际化处理. 使用springgmvc与jsp进行国际化 ...

  5. x86汇编之栈与子程序调用

    什么是栈 栈与普通数据结构所说的栈的概念是相似的,遵循后进先出原则.不同的是汇编中所说的栈是一个在内存中连续的保存数据的区域,也即是实际存在的内存区域,进栈和出栈遵循后进先出原则. 在x86架构中,栈 ...

  6. Python基础：按位异或 ^ ,按位或 | ,按位与 &

    前言文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取http: ...

  7. 架构师修炼之设计模式 - 策略模式(Strategy) 【Python与C#实现】

    程序员,我为你祝福 愿你有一个灿烂的前程 愿你有情人终成眷属 愿你在尘世获得幸福 我只想成为架构师,走遍江湖! 目录 模式定义 模式分类 模式结构 实例(C#与Python版) 优点 缺点 使用场景 ...

  8. Linux下安装Redis4.0版本（简便方法）

    Redis介绍: Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key - value 缓存产品有以下三个特点: Redis支持数据的持久 ...

  9. vue2.x学习笔记（二）

    接着前面的内容:https://www.cnblogs.com/yanggb/p/12555836.html. 声明式渲染 vue的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统. ...

  10. 美的PDF转换成Word转换器完全免费

    下载地址:百度网盘提取码:02ap 安装破解步骤:先安装主程序,末尾是full结尾的,安装完成后不要打开软件,然后接着安装破解补丁,即可破解成功! 需要的老铁们直接拿去用吧,亲测好用!有配套的功能强大 ...