黑马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. springboot 上传图片，地址，在页面展示图片

    package com.cxwlw.zhcs.controller.api;import org.springframework.stereotype.Controller;import org.sp ...

  2. centos7安装harbor

    harbor是什么? docker容器是集装箱,harbor就是放集装箱的港湾. 一.下载软件: github上选择对应版本下载 https://github.com/goharbor/harbor/ ...

  3. 【Distributed】分布式任务调度平台

    一.概述 什么是定时任务 二.Java实现定时任务方式 2.1 Thread 2.2 TimerTask 2.3 ScheduledExecutorService 2.4 Quartz 引入maven ...

  4. idou老师教你学Istio 26：如何使用Grafana进行可视化监控

    使用Grafana插件进行监控是Istio提供的监控能力之一.Istio提供丰富的监控能力,Grafana插件在Istio对Prometheus支持的基础上,为用户提供基于网页仪表面板的可视化监控效果 ...

  5. PHP 基础知识-数组

    PHP 的数组主要分为: 索引数组 - 带有数字索引的数组 关联数组 - 带有指定键的数组 多维数组 - 包含一个或多个数组的数组   索引数组:   有两种创建索引数组的方法: 索引是自动分配的(索 ...

  6. go语言信号量的使用例子

    //shared values are passed around on channels // 信号量. /* var sem = make(chan int, MaxOutstanding) fu ...

  7. nginx配置及使用

    偶尔会用到nginx部署项目,记录nginx配置备忘.主要有端口.地址及别名,代理转发和https配置. 配置文件为nginx.conf. 部署http项目: 1.找到http下的server配置项 ...

  8. 001_C#我的第一个串口上位机软件

    (一)首先感谢杜洋工作室 < 入门 C#设计 >带来的视频教学 (二)本次设计从会单片机但是又不会上位机又想搞简单上位机的人群角度提供教程 (三)本次教程的目的是制作普通的串口软件,从而实 ...

  9. redis数据存储--redis在Windows下的安装过程

    一.下载软件 1. 下载Redis windows版本,Redis官网下载地址为:https://redis.io/download: 这里下载的是Windows版本,下载地址为:https://gi ...

  10. Bzoj 3631: [JLOI2014]松鼠的新家(树链剖分+线段树)

    3631: [JLOI2014]松鼠的新家 Time Limit: 10 Sec Memory Limit: 128 MB Description 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n个 ...