<!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. C++中类中常规变量、const、static、static const(const static)成员变量的声明和初始化

    C++类有几种类型的数据成员:普通类型.常量(const).静态(static).静态常量(static const).这里分别探讨以下他们在C++11之前和之后的初始化方式. c++11之前版本的初 ...

  2. Python3 Selenium自动化web测试 ==> 第二节 页面元素的定位方法 <上>

    前置步骤: 上一篇的Python单元测试框架unittest,我认为相当于功能测试测试用例设计中的用例模板,在自动化用例的设计过程中,可以封装一个模板,在新建用例的时候,把需要测试的步骤添加上去即可: ...

  3. Python爬虫学习==>第三章：Redis环境配置

    学习目的: 学习非关系型数据库环境安装,为后续的分布式爬虫做基建 正式步骤 Step1:安装Redis 打开http://www.runoob.com/,搜索redis安装 打开搜索的内容,得到red ...

  4. DARTS代码分析（Pytorch）

    最近在看DARTS的代码,有一个operations.py的文件,里面是对各类点与点之间操作的方法. OPS = { 'none': lambda C, stride, affine: Zero(st ...

  5. 在 Windows 10 上用超级终端配置 Cisco 3560 Series

    在Cisco实验中,恢复路由器出厂配置是必须的内容,所以今天就由小编来为大家介绍Cisco软件怎么恢复路由器出厂配置. 1. 通过终端连接交换机1.1. 通过 Windows 的超级终端连接 Cisc ...

  6. linux下Eclipse进行C编程时动态链接库的生成和使用

    引用 http://linux.chinaitlab.com/soft/864157.html 欢迎进入Linux社区论坛,与200万技术人员互动交流 >>进入 一.创建动态链接库1.创建 ...

  7. AIX弱口令解密

    1.看下我们的AIX弱口令如果是图中的这种那么我们就可以通过以下脚本来完成转换 2.打开kali给脚本丢进去自动生成下图这种格式,转换完成后保存通过john --w来跑. 脚本文件:保存为.bash ...

  8. windows10 AppStore安装 应用商店重新安装

    点击左下角的搜索按钮,如下图所示   输入powershell,在结果中找到widows powershell应用,如下图所示   右键单击widows powershell应用,选择以管理员运行,如 ...

  9. mvn打包到私服

    mvn打包到私服 1 命令行打包 待定... 2 idea打包 1> 配置 pom.xml <!-- 发布 --><distributionManagement> < ...

  10. 房地产大佬潘石屹推荐学Python编程，这本从0到1就够了

    潘石屹推荐学Python编程,很多人都不相信,他的微博真真切切. 连房地产都开始学Python了,因为要听懂机器,让机器为我所用. 再不学习Python真的晚了!!!! 如何学? 怎么学? 还是推荐高 ...