<!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. appium环境搭建步骤

    前提条件是:搭建selenium环境(侵权删) 1.安装jdk,配置环境变量: JAVA_HOME C:\Program Files\Java\jdk1.8.0_60(jdk的存放路径) CLASSP ...

  2. 企业邮箱 Webmail 通讯录导入 Outlook

    企业邮箱暂不支持直接将通讯录同步至客户端软件,可以通过将通讯录在 Webmail 邮箱中导出,再导入所用软件的间接方法进行使用. 以Outlook 2010为例,如下详细导入通讯录步骤: 1.打开Ou ...

  3. 菜鸟系列Fabric——Fabric 网络架构介绍(4)

    Fabric 网络架构介绍 1. 网络架构介绍 如图所示,fabric网络架构主要包含客户端节点.CA节点.Peer节点.Orderer节点这几个部分.并且fabric架构是安装组织来进行划分当,每个 ...

  4. PTA(Basic Level)1041.考试座位号

    每个 PAT 考生在参加考试时都会被分配两个座位号,一个是试机座位,一个是考试座位.正常情况下,考生在入场时先得到试机座位号码,入座进入试机状态后,系统会显示该考生的考试座位号码,考试时考生需要换到考 ...

  5. （5.6）mysql高可用系列——MySQL Utilities 管理工具

    关键词:mysql工具集,mysql管理工具,mysql utilities [1]安装mysql utilities cd /download wget https://cdn.mysql.com/ ...

  6. 创建Maven Web项目时很慢解决办法

    点击加号,Name输入archetypeCatalog,Value输入internal archetypeCatalog表示插件使用的archetype元数据,不加这个参数时默认为remote,loc ...

  7. mongodb 添加用户

    use admindb.createUser({ user:"admin", pwd:"abc123456", roles:[{role:"root& ...

  8. LeetCode 初次使用 两数之和的训练

    首先看到示例: 给定 nums = [2, 7, 11, 15], target = 9 因为 nums[0] + nums[1] = 2 + 7 = 9 所以返回 [0, 1] 想到,我可以先在nu ...

  9. Python中的xrld模块

    一. 什么是xrld模块 python操作excel主要用到xlrd和xlwt这两个库,即xlrd是读excel,xlwt是写excel的库. 二. 使用介绍 . empty(空的), number, ...

  10. redis 单线程的理解

    单线程模型 Redis客户端对服务端的每次调用都经历了发送命令,执行命令,返回结果三个过程.其中执行命令阶段,由于Redis是单线程来处理命令的,所有每一条到达服务端的命令不会立刻执行,所有的命令都会 ...