黑马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. javascript--BOM(browser object model)五大对象

    浏览器对象模型: 作用:访问.控制.修改浏览器,与浏览器进行交互(打开新的窗口.回退历史记录.获取url) BOM与的DOM区别:JS通过BOM与浏览器进行交互.BOM的window对象包含了docu ...

  2. SpringCloud之Zuul网关原理及其配置

    Zuul是spring cloud中的微服务网关.网关: 是一个网络整体系统中的前置门户入口.请求首先通过网关,进行路径的路由,定位到具体的服务节点上. Zuul是一个微服务网关,首先是一个微服务.也 ...

  3. swoole httpserver学习

    文件 HttpServer.php <?php /** * Created by PhpStorm. * User: mac * Date: 2019/9/13 * Time: 21:00 */ ...

  4. （六）图数据neo4j之cypher(一)

    1.Cypher概述 cypher是一种声明式的图数据库查询语言,能高效的查询和更新图数据库,是依赖于模式的.所谓模式(Patterns)是就是众多节点和关系的任意复杂想法. (1)节点语法 cyph ...

  5. c# 引用类型和值类型的内存分配

  6. Flutter——AppBar组件（顶部导航组件）

    AppBar组件的常用属性如下: 属性 描述 leading 在标题前面显示的一个控件,在首页通常显示应用的 logo:在其他界面通常显示为返回按钮 title 标题,通常显示为当前界面的标题文字,可 ...

  7. git切换账号邮箱

    git config user.name 查看当前用户名 git config user.email 查看当前邮箱 git config --global user.name "用户名&qu ...

  8. jade-if-else-unless-case

    if else - var lession = ['node','jade'] if lession if lession.length > 2 p 1 #{lession.join(', ') ...

  9. springboot中，使用redisTemplate操作redis

    知识点: springboot中整合redis springboot中redisTemplate的使用 redis存数据时,key出现乱码问题 一:springboot中整合redis (1)pom. ...

  10. ubuntu下后台服务的管理

    注册后台服务后都有脚本存在/lib/systemd/system路径下 如mysql为mysql.service 被service管理的进程被杀掉还是会重启的 应使用service XXX stop停 ...