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

一、总结

一句话总结：

vue中的过滤器可以传递参数（根据参数来过滤），也可以用管道符拼接多个过滤器：例如<p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p>

1、vue中如何创建全局过滤器（在单个vue外）？

Vue.filter()，第一个参数是过滤器名称，第二个是过滤器的函数体
// 定义一个 Vue 全局的过滤器，名字叫做  msgFormat

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

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

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

})

2、vue中如何使用全局过滤器？

第一个是要使用过滤器的字符串，后面用管道符接多个过滤器，过滤器中可以接参数：<p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p>

3、全局过滤器和私有过滤器的区别？

全局过滤器定义在全局，全局可以使用
私有过滤器定义在某个vue中，在这个vue控制的区域才能使用

4、当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用？

局部过滤器优先于全局过滤器被调用

二、vue中全局过滤器的基本使用

1、效果图

 

2、代码

 <!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>

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

 </head>

 <body>

   <div id="app">

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

   </div>

   <script>

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

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

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

       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.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；

私有过滤器

  1. HTML元素：


<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
  1. 私有 filters 定义方式：


filters: { // 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用

    dataFormat(input, pattern = "") { // 在参数列表中 通过 pattern="" 来指定形参默认值，防止报错

      var dt = new Date(input);

      // 获取年月日

      var y = dt.getFullYear();

      var m = (dt.getMonth() + 1).toString().padStart(2, '0');

      var d = dt.getDate().toString().padStart(2, '0');

      // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日

      // 否则，就返回  年-月-日 时：分：秒

      if (pattern.toLowerCase() === 'yyyy-mm-dd') {

        return `${y}-${m}-${d}`;

      } else {

        // 获取时分秒

        var hh = dt.getHours().toString().padStart(2, '0');

        var mm = dt.getMinutes().toString().padStart(2, '0');

        var ss = dt.getSeconds().toString().padStart(2, '0');

        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

      }

    }

  }

使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串；

全局过滤器



// 定义一个全局过滤器

Vue.filter('dataFormat', function (input, pattern = '') {

  var dt = new Date(input);

  // 获取年月日

  var y = dt.getFullYear();

  var m = (dt.getMonth() + 1).toString().padStart(2, '0');

  var d = dt.getDate().toString().padStart(2, '0');

  // 如果 传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回 年-月-日

  // 否则，就返回  年-月-日 时：分：秒

  if (pattern.toLowerCase() === 'yyyy-mm-dd') {

    return `${y}-${m}-${d}`;

  } else {

    // 获取时分秒

    var hh = dt.getHours().toString().padStart(2, '0');

    var mm = dt.getMinutes().toString().padStart(2, '0');

    var ss = dt.getSeconds().toString().padStart(2, '0');

    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

  }

});

注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！

 

黑马vue---28、vue中全局过滤器的基本使用的更多相关文章

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

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

  2. vue指令v-html中使用过滤器filters功能

    Vue 2.0 不再支持在 v-html 中使用过滤器 解决方法: 1:全局方法(推荐) 2:computed 属性 3:$options.filters(推荐) 1:使用全局方法: 可以在 Vue ...

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

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

  4. Vue 项目中添加全局过滤器以及全局混合mixin

    可以在.vue文件中定义局部使用的过滤器 export default{ data(){ return [] }, filters:{ toUpperCase:function(value){ ret ...

  5. vue 中全局filter过滤器的配置及使用

    在项目中使用到的经常用到过滤器,比如时间,数据截取等过滤器,如果在每个.vue中都可以复制同一个过滤器,这可以达到目的,但是遇到方法有bug时就需要诸葛修改进入不同的页面修改,这样既费时又费力,优先可 ...

  6. 黑马vue---31-32、vue过滤器实例

    黑马vue---31-32.vue过滤器实例 一.总结 一句话总结: vue内部的东西,无论是过滤器还是组件,都是键值对的方式 1.过滤器的定义语法? Vue.filter('过滤器的名称', fun ...

  7. vue中自定义指令vue.direvtive，自定义过滤器vue.filter(),vue过渡transition

    自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...

  8. vue中的过滤器

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

  9. Vue全局过滤器的使用 运用在时间过滤 内容添加crud

    过滤器的使用 msgFormt是你自己定义的过滤器方法, Vue.filter是你自己定义的全局过滤器.没有s 过滤器要有返回值哈 用retuen     Vue.filter("msgFo ...

随机推荐

  1. TypeScript入门七：TypeScript的枚举

    关于枚举 数字枚举 字符串枚举 异构枚举 计算的和常量成员 运行时的枚举与反向映射 常量枚举与外部枚举 一.关于枚举 枚举:一个集的枚举是列出某些有穷序列集的所有成员的程序,或者是一种特定类型对象的计 ...

  2. Oracle dump函数的用法

    一.函数标准格式: DUMP(expr[,return_fmt[,start_position][,length]]) 基本参数时4个,最少可以填的参数是0个.当完全没有参数时,直接返回null.另外 ...

  3. 第五章、drf-JWT认证

    目录 JWT认证 JWT认证方式与其他认证方式对比: 优点 格式 drf - jwt 插件 官网 安装 token的签发与校验初识: 签发token 校验token 自定义drf-jwt配置 sett ...

  4. 跟着minium官网介绍学习minium-----（一）

    某天,再打开微信开发者工具的时候收到一条推送.说是微信小程序自动化框架 Python 版 -- Minium 公测. Url如下: https://developers.weixin.qq.com/c ...

  5. js面向对象篇（一）

    Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). ----摘 ...

  6. Java字节码常量池深度剖析与字节码整体结构分解

    常量池深度剖析: 在上一次[https://www.cnblogs.com/webor2006/p/9416831.html]中已经将常量池分析到了2/3了,接着把剩下的分析完,先回顾一下我们编译的源 ...

  7. 那些吓人的 Linux 命令

    本文转载于其它网站,原作者如有问题,请您及时联系我,及时删除! 哪些Linux命令会让人联想到妖魔鬼怪?不妨好好瞧一瞧! 每年一度的万圣节马上就要到来,是时候稍微关注一下Linux那吓人的一面了.哪些 ...

  8. 手把手教你在CentOS上搭建Kubernetes集群

    作者:ChamPly 安装CentOS 1.安装net-tools [root@localhost ~]# yum install -y net-tools 2.关闭firewalld [root@l ...

  9. 获取TableViewer里面的所有TableViewerColumn

    private TableViewerColumn[] getTableViewerColumns(TableViewer tableViewer) { TableColumn[] columns = ...

  10. 尤娜博客系统 Una

    站长资讯平台:Una [‘尤娜’] 只是一个项目代号,没有特殊含义.尤娜是站在巨人的肩膀上开发完成的博客系统,旨在为程序员提供一个极简的内容创作管理平台,尤娜100%开放源代码,如果您对她感兴趣,Fo ...