<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>Document</title>

    <!--1.导入Vue的包-->

    <script src=" https://cdn.jsdelivr.net/npm/vue"></script>

  </head>

  <body>

      <div id="app">

      <p>{{ msg|msgFormat('疯狂','233') | test }}</p>

      </div>

      <script>

      //定义一个Vue全局的过滤器，名字叫做 msgFormat

      Vue.filter('msgFormat',function(msg,arg,arg2){

        //字符串的 replace方法，第一个参数，除了可写一个字符串之外，还可以定义一个正则。正则表达式如果不加g修饰符，就替换第一个匹配成功的值，否则替换所有匹配成功的值。

       return msg.replace(/单纯/g,arg+arg2)

      })

      Vue.filter('test',function(msg){

        return msg+'========'

      })

          //创建 Vue 实例，得到 ViewModel

          var vm =  new Vue({

              el:'#app',

        data:{

          msg:'曾经，我是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男孩'

        },

        methods:{}

          });

      </script>

  </body>

</html>

第二章 Vue快速入门-- 24 过滤器-Vue中全局过滤器的基本使用的更多相关文章

  1. 第二章 Kubernetes快速入门

    一.四组基本概念 Pod/Pod控制器: Name/Namespace: Label/Label选择器: Service/Ingress. 二.Pod/Pod控制器 2.1 Pod Pod是K8S里能 ...

  2. vue 快速入门 系列 —— vue-cli 下

    其他章节请看: vue 快速入门 系列 Vue CLI 4.x 下 在 vue loader 一文中我们已经学会从零搭建一个简单的,用于单文件组件开发的脚手架:本篇,我们将全面学习 vue-cli 这 ...

  3. vue 快速入门 系列 —— 实例方法（或 property）和静态方法

    其他章节请看: vue 快速入门 系列 实例方法(或 property)和静态方法 在 Vue(自身) 项目结构 一文中,我们研究了 vue 项目自身构建过程,也知晓了 import Vue from ...

  4. vue 快速入门 系列 —— 虚拟 DOM

    其他章节请看: vue 快速入门 系列 虚拟 DOM 什么是虚拟 dom dom 是文档对象模型,以节点树的形式来表现文档. 虚拟 dom 不是真正意义上的 dom.而是一个 javascript 对 ...

  5. vue 快速入门 系列

    vue 快速入门(未完结,持续更新中...) 前言 为什么要学习 vue 现在主流的框架 vue.angular 和 react 都是声明式操作 DOM 的框架.所谓声明式,就是我们只需要描述状态与 ...

  6. vue 快速入门 系列 —— 初步认识 vue

    其他章节请看: vue 快速入门 系列 初步认识 vue vue 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 所谓渐进式,就是你可以一步一步.有阶段 ...

  7. vue 快速入门 系列 —— vue 的基础应用（上）

    其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...

  8. vue 快速入门 系列 —— vue loader 下

    其他章节请看: vue 快速入门 系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS ...

  9. vue 快速入门 系列 —— vue-cli 上

    其他章节请看: vue 快速入门 系列 Vue CLI 4.x 上 在 vue loader 一文中我们已经学会从零搭建一个简单的,用于单文件组件开发的脚手架:本篇,我们将全面学习 vue-cli 这 ...

随机推荐

  1. EncryptionAndDecryptionC# 加密 解密

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. .pkl文件是什么？python

    对于.pkl文件,我是在接触 SMPL模型的时候用到的.SMPL的开源项目包里,有model文件夹,打开有两个.pkl文件.然后,找到了一个说的相对比较详细的网址.https://jingyan.ba ...

  3. GO-REDIS的一些高级用法

    1. 前言 说到Golang的Redis库,用到最多的恐怕是redigo 和 go-redis.其中 redigo 不支持对集群的访问.本文想聊聊go-redis 2个高级用法 2. 开启对Clust ...

  4. django中聚合aggregate和annotate GROUP BY的使用方法

    接触django已经很长时间了,但是使用QuerySet查询集的方式一直比较低端,只会使用filter/Q函数/exclude等方式来查询,数据量比较小的时候还可以,但是如果数据量很大,而且查询比较复 ...

  5. BeanPostProcessor详解

    转自: https://www.jianshu.com/p/d26e8ec9c077? BeanPostProcessor也称为Bean后置处理器,它是Spring中定义的接口,在Spring容器的创 ...

  6. 一加手机2 进入recovery 模式无法挂载USB存储器通过命令窗口上传ROM镜像

    试过3.0.3-0和3.0.3-1的recovery都无法使用“挂载USB大容量存储器”模式,这肯定让很多清掉系统(就是system分区)的小伙伴无力吐槽,因为这样子rom就无法在rec里面从电脑拷到 ...

  7. filter_var()函数

    我们使用 payload :?url=javascript://comment%250aalert(1) ,可以执行 alert 函数: 实际上,这里的 // 在JavaScript中表示单行注释,所 ...

  8. springboot_redis

    1.引入redis的启动器 <dependency> <groupId>org.springframework.boot</groupId> <artifac ...

  9. Java 虚拟机的运行模式

    这几天在读周志明老师的<深入理解JVM虚拟机> 讲到了 java的运行模式, 有mixed 模式 interpret模式还有compile模式.效果如下面所示 java -version ...

  10. 【转贴】GS464/GS464E

    GS464/GS464E GS464为四发射64位结构,采用动态流水线.其1.0版本(简称GS464)为9级流水线结构,在龙芯3A.3B.2H中使用.其2.0版本(简称GS464E)为12级动态流水线 ...