<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

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

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <!-- 这里 {{ data数据 | 定义的过滤器的名称（传入的参数）}}  -->

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

    <p>{{ msg1 | test('皇上') }}</p>

    <p>{{ msg2 | test1() }}</p>

  </div>

  <script>

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

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

      // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则

      // 正则的方式

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

    })

      // 直接字符串替换

    Vue.filter('test', function (msg1, arg, arg2) {

      return msg1.replace('奴才', arg)

    })

    // 这里直接拼接字符串

    Vue.filter('test1', function (msg2) {

      return '我娘' + msg2

    })

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        msg: '曾经，我也是一个单纯的少年',

        msg1: '奴才！还记得大明湖畔的夏雨荷吗',

        msg2: '就是那年的夏雨荷'

      },

      methods: {}

    });

  </script>

</body>

</html>

Vue 中的过滤器的使用的更多相关文章

  1. 黑马vue---28、vue中全局过滤器的基本使用

    黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...

  2. 第二章 Vue快速入门-- 24 过滤器-Vue中全局过滤器的基本使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. vue中的过滤器

    过滤器 过滤器规则 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方: 双花括号插值{{}}和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应 ...

  4. Vue中全局过滤器期与局部过滤器期的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Vue中，过滤器的使用方法！

    Vue.js允许自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和v-bind表达式.过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示:(借官方的 ...

  6. 简述Vue中的过滤器

    1.过滤器的基本概念 概念:本质上是函数: 作用:用户输入数据后,它能够进行处理,并返回一个数据结果:(无return语句不会报错,但是这种过滤器没有丝毫意义) 格式:管道符(  |  )进行连接,而 ...

  7. 去除富文本中的html标签及vue、react、微信小程序中的过滤器

    在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除htm ...

  8. vue中使用some删除list中的数据

    在vue中可以使用some方法查找需要删除的所以 this.list.some((item, i) => { if (item.id == id) { this.list.splice(i, 1 ...

  9. Vue学习之过滤器和自定义指令小结（三）

    过滤器: 过滤是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰.过滤器就是过滤用的工具.渲染数据用的!!! 我们需要知道的是: 1.Vue中的过滤器不能 ...

随机推荐

  1. docker无法删除镜像，Error: No such container，附docker常用命令

    最近打算删除掉docker镜像但是发现有几个镜像就是删除不了,加了-f强制删除也不行,一直报Error: No such container的错误,最后终于找到了办法直接删除文件,步骤如下: 切换到r ...

  2. [idea]Error:java: invalid source release: 1.8 标签： idea 2017-02-24 15:50 961人阅读

    最近用idea敲struts,虽然idea的界面很好看,代码提示也很强大,不过也的确是碰到了一些在eclipse上从来没有碰到过的问题,而且我发现,idea的错误,很多都是在外国的网站上提问的人比较多 ...

  3. Maximum Depth of Binary Tree 树的最大深度

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  4. thinkphp5.0中英文切换

    首先来看下它的配置: // 是否开启多语言 'lang_switch_on' => true, //语音列表 'lang_list' => ['zh-cn','en-us'], // 获取 ...

  5. TIJ——Chapter Thirteen:Strings

    String 对象是不可修改的,对于被String 重载的'+' 和'+=' 运算符来说,当你用它们来连接两个String 对象的时候,它在底层并不会对于每一次连接均生成一个String 对象,取而代 ...

  6. 使用spring jpa 时,利用nativeQuery,获取数据,无需新建实体,按照别名返回Json数据

    刚开始是这样写的 @Query(value = "SELECT ll.user_id id ,u.catong_img catong_img,ll.locationId location_i ...

  7. mysql 查询当天、昨天、本周、上周、本月、上月、今年、去年数据

    mysql查询今天.昨天.7天.近30天.本月.上一月 数据 今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 SELECT ...

  8. oracle函数 to_single_byte(c1)

    [功能]将字符串中的全角转化为半角 [参数]c1,字符型 [返回]字符串 [示例] SQL> select to_multi_byte('高A') text from dual; test -- ...

  9. Oracle函数——COALESCE

    COALESCE 含义:COALESCE是一个函数, (expression_1, expression_2, ...,expression_n)依次参考各参数表达式,遇到非null值即停止并返回该值 ...

  10. 【iOS知识学习】_int、NSInteger、NSUInteger、NSNumber的差别和联系

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/weasleyqi/article/details/33396809 1.首先先了解下NSNumber ...