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 c++ vim环境搭建系列（3）——Ubuntu18.04.4编译安装youcompleteme

    3. youcompleteme编译安装 参考网址: https://github.com/ycm-core/YouCompleteMe#linux-64-bit 建议不要用这个博客的方法: http ...

  2. alg-最长公共子序列

    class Solution { public: std::string LongestCommonSubsequence(const std::string& s1, const std:: ...

  3. Spring 中 用 ${xxx} 读取properties文件的说明

    properties 如果在 spring 中通过 PropertyPlaceholderConfigurer 加载,当spring 中需要 用到 properties 中的一些 key 和value ...

  4. Java编程最差实践常见问题详细说明（1）转

    Java编程最差实践常见问题详细说明(1)转     原文地址:http://www.odi.ch/prog/design/newbies.php 每天在写Java程序, 其实里面有一些细节大家可能没 ...

  5. php.ini中文详解

    [PHP] ;;;;;;;;;;;;;;;;;;;;;;; ; 关于 php.ini 配置文件 ; ;;;;;;;;;;;;;;;;;;;;;;; ; PHP 的初始化文件, 必须命名为 php.in ...

  6. L12 Transformer

    Transformer 在之前的章节中,我们已经介绍了主流的神经网络架构如卷积神经网络(CNNs)和循环神经网络(RNNs).让我们进行一些回顾: CNNs 易于并行化,却不适合捕捉变长序列内的依赖关 ...

  7. Leetcode1353-最多可以参加的会议数目

    题目描述: 给你一个数组 events,其中 events[i] = [startDayi, endDayi] ,表示会议 i 开始于startDayi ,结束于endDayi . 你可以在满足 st ...

  8. Go gRPC进阶-go-grpc-middleware使用（八）

    前言 上篇介绍了gRPC中TLS认证和自定义方法认证,最后还简单介绍了gRPC拦截器的使用.gRPC自身只能设置一个拦截器,所有逻辑都写一起会比较乱.本篇简单介绍go-grpc-middleware的 ...

  9. 通过 Swoole\Table 实现 Swoole 多进程数据共享

    第三方存储媒介 前面我们介绍了基于 Swoole 的 Process 及 Process\Pool 模块在 PHP 中实现多进程管理,但是多进程模式下进程间是相互隔离的,无法共享数据和变量,即便是通过 ...

  10. AOP-SheepAspect

    转载https://www.cnblogs.com/InCsharp/p/5902133.html SheepAspect 简介以及代码示列: SheepAspect是一个AOP框架为.NET平台,深 ...