专栏首页eadelavue--过滤器(私有,全局)

vue--过滤器(私有,全局)

过滤器

概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;

私有过滤器

  1. HTML元素:
​
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
​
<!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>
  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}`;
​
  }
​
});
​

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vuejs基础-常见指令

    在VM实例中,如果想要获取data上的数据,或者想要掉哦用methods中的方法,必须通过this.数据属性名或者this.方法名来进行访问,这里的this,就...

    eadela
  • oracle--对象权限

    测试: update ww.wwTable set name = 'sss' where id = 5;

    eadela
  • oracle--增删改、表备份、集合运算

    eadela
  • 【目标跟踪】CVPR2020 | 谷歌提出RetinaTrack模型,用Waymo Open Dataset评估表现SOTA

    传统上的多目标跟踪和检测任务是分别由单独的系统执行的,大多数之前的工作只关注其中某一方面。能够获得准确的探测会使跟踪系统受益,而文献中有大量证据表明探测器可以...

    CNNer
  • Spark通信原理之Python与JVM的交互

    我们知道Spark平台是用Scala进行开发的,但是使用Spark的时候最流行的语言却不是Java和Scala,而是Python。原因当然是因为Python写代...

    老钱
  • Hexo 迁移至 Hugo

    终于还是忍受不了Hexo那繁多的依赖和一片飙红, 换了使用GoLang编写的Hugo. 使用感觉良好, 生成速度很快, 文件结果也比较清晰. 值得花一点儿时间迁...

    许杨淼淼
  • 机器学习中的EM算法详解及R语言实例

    CSDN:白马负金羁 最大期望算法(EM) K均值算法非常简单(可参见之前发布的博文),详细读者都可以轻松地理解它。但下面将要介绍的EM算法就要困难许多了,它...

    机器学习AI算法工程
  • PHP 获取 特定时间范围 类

    目录 前序   用途   功能及事项   使用方法   代码及注释 前序:   总体来说,我更应该是一个 android 移动开发者,而不是一个 phper,...

    林冠宏-指尖下的幽灵
  • 命令小技巧总结

    当我们查看java日志的时候,有一些报错日志,并不会是输出到一行中,而是唰唰唰打印一堆,就像下面这样

    dogfei
  • 亚马逊云推出基于机器学习的企业搜索服务Kendra,剑指微软

    近日,在AWS re:Invent全球大会上,亚马逊发布了五项新的基于机器学习的人工智能 (AI) 服务。

    曼孚科技

扫码关注云+社区

领取腾讯云代金券