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. leetcode-0001 两数之和

    题目地址:https://leetcode-cn.com/problems/two-sum/ 1.暴力解法 直接双重循环,枚举出所有可能的解,时间复杂度为O(n^2),空间复杂度为O(1) var t ...

  2. go中的error小结

    go中的error error和panic error接口 go中err的困局 推荐方法 总结 参考 go中的error go中的错误处理,是通过返回值的形式来出来,要么你忽略,要么你处理(处理也可以 ...

  3. Linux C++ 网络编程学习系列（5）——多路IO之epoll边沿触发

    多路IO之epoll边沿触发+非阻塞 源码地址:https://github.com/whuwzp/linuxc/tree/master/epoll_ET_LT_NOBLOCK_example 源码说 ...

  4. 游戏开服 报一些 ip 设置 数据格式的异常，但断点明明都是数字 没问题的

    游戏服开始起服,结果报乱七八招的错误,先  ccs 那 ip 有问题,我给直接注释掉了:然后又 报 KeyValueDictCache 中 ips 设置有问题,都是报格式错误,结果我断点明明都是数字结 ...

  5. [算法总结]DFS(深度优先搜索)

    目录 一.关于DFS 1. 什么是DFS 2. DFS的搜索方式 二.DFS的具体实现 三.剪枝 1. 顺序性剪枝 2. 重复性剪枝 3. 可行性剪枝 4. 最优性剪枝 5. 记忆化剪枝 四.练习 一 ...

  6. 基于 Njmon + InfluxDB + Grafana 实现性能指标实时可视监控

    引言 最近逛 nmon 官网时,发现了一个新工具 njmon,功能与 nmon 类似,但输出为 JSON 格式,可以用于服务器性能统计. 可以使用 njmon 来向 InfluxDB 存储服务器性能统 ...

  7. git以及gitHub的使用说明书

    一．使用说明 1.Git与github的功能: Git是世界上最先进的分布式版本控制系统,也就是用来记录你的项目代码历史变更信息的工具:github就是用来存储你的代码以及变更信息的云端平台: 2.优 ...

  8. centos7 安装php7遇到的问题

    环境中安装过php 5.4,觉得版本太低了,因此删除旧版本安装了新版本 1. 安装epel-release 通过命令: rpm -ivh http://dl.fedoraproject.org/pub ...

  9. 详解JS闭包概念

    闭包理解 1.  如何产生闭包?    *当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时,产生闭包 2.  闭包到底是什么?    * 使用Chrome调试查看    * 理解一 ...

  10. Spark SQL源码解析（二）Antlr4解析Sql并生成树

    Spark SQL原理解析前言: Spark SQL源码剖析(一)SQL解析框架Catalyst流程概述 这一次要开始真正介绍Spark解析SQL的流程,首先是从Sql Parse阶段开始,简单点说, ...