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. 【漏洞通告】Linux Kernel 信息泄漏&权限提升漏洞（CVE-2020-8835）通告

    0x01漏洞简介: 3月31日, 选手Manfred Paul 在Pwn2Own比赛上用于演示Linux内核权限提升的漏洞被CVE收录,漏洞编号为CVE-2020-8835.此漏洞由于bpf验证系统在 ...

  2. 详解 Set接口

    (请关注 本人"集合"总集篇博文--<详解 Collection接口>) 在Collection接口的子接口中,最重要的,也是最常见的两个-- List接口 和 Set ...

  3. 2. Git-命令行-删除本地和远程分支

    命令行方式 Git Bash: 切换到要操作的项目文件夹 命令行 : $ cd <ProjectPath> 查看项目的分支们(包括本地和远程) 命令行 : $ git branch -a ...

  4. 乱 七 八 糟 $(n.)$

    \(2020/4/22\) 今天常规作业还是太慢了,白天似乎已经抓紧了,但总还能挤出时间来的.八点钟了还有物理和英语作业,回去又得很晚睡. 还是容易开小差,不过回忆了一下,今天化学课还是太懒散,其余的 ...

  5. scheduler_default_filters 详解

    Filter scheduler 是 nova-scheduler 默认的调度器,调度过程分为两步:     通过过滤器(filter)选择满足条件的计算节点(运行 nova-compute) 通过权 ...

  6. Springboot：logback日志管理（九）

    Springboot默认使用的日志框架就是logback 创建自定义的logback-spring.xml放在resources类目录下即可 logback-spring.xml: <?xml ...

  7. 用pip install不能成功安装时的处理方法

    解决办法: pip install pymysql -i http://pypi.douban.com/simple --trusted-host pypi.douban.com

  8. 容易忽略的CSS3属性

    flex布局模型 1. flex-direction: row |  row-reverse | column | column-reverse flex-direction 属性决定主轴的方向(即项 ...

  9. CDNbest-访问限制

    写在开始之前 有时候我们需要对网站某个目录或整站限制只对特点的ip访问 不是在ip范围之内的统统拒绝 步骤 首先我们登录,找到我们的目标站点,点击去如下图所示 找到高级设置 添加新规则,如下 这里用到 ...

  10. 进阶 Linux基本命令-1

    vmware三种网络模式1,桥接虚拟机直接连接外网,局域网.宿主机电脑不提供路由. 2,NAT网络地址转换,家庭网 3,host only 只能和宿主电脑打交道 Linux命令形式 命令 +[参数]+ ...