vue中时间显示问题，Sat Aug 01 2020 11:31:41 GMT+0800转化为2020-8-1 11:32:0

最新推荐文章于 2022-08-02 16:01:02 发布

Pickle_泡菜君

最新推荐文章于 2022-08-02 16:01:02 发布

阅读量2.1k

点赞数 2

分类专栏：前端笔记文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_44736584/article/details/107728486

版权

前端笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

问题：

在这里插入图片描述
转化为下方格式：

使用过滤器

过滤器只能用在{{}}和v-bind表达式中

全局过滤器

{{sex | normalSex}}

/** function的第一个名称被过滤死，永远都是管道符的前的sex*/
Vue.filter("过滤器的名称", function(data) {
	return "这是你想变得值";
})

时间过滤器代码

Vue.filter("formatDate", function (date, pattern = "") {
      var dt = new Date(date);

      var year = dt.getFullYear();
      var month = dt.getMonth() + 1;
      var day = dt.getUTCDate();
      if (pattern.toLocaleLowerCase() === "yyyy-mm-dd") {
        return `${year}-${month}-${day}`;
      } else {
        var hours = dt.getHours();
        var minutes = dt.getMinutes();
        var seconds = dt.getSeconds();

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      }
  });

全部代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>全局过滤（时间格式）</title>
    <script src="../lib/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{msg | formatDate()}}</h1>
    </div>
  </body>

  <script>
  	// 时间过滤器
    Vue.filter("formatDate", function (date, pattern = "") {
      var dt = new Date(date);

      var year = dt.getFullYear();
      var month = dt.getMonth() + 1;
      var day = dt.getUTCDate();
      if (pattern.toLocaleLowerCase() === "yyyy-mm-dd") {
        return `${year}-${month}-${day}`;
      } else {
        var hours = dt.getHours();
        var minutes = dt.getMinutes();
        var seconds = dt.getSeconds();

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      }
    });

    var vm = new Vue({
      el: "#app",
      data() {
        return {
          msg: new Date(),
        };
      },
    });
  </script>
</html>

Pickle_泡菜君

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue中时间显示问题，Sat Aug 01 2020 11:31:41 GMT+0800转化为2020-8-1 11:32:0

问题：转化为下方格式：使用过滤器过滤器只能用在{{}}和v-bind表达式中全局过滤器{{sex | normalSex}}/** function的第一个名称被过滤死，永远都是管道符的前的sex*/Vue.filter("过滤器的名称", function(data) { return "这是你想变得值";})时间过滤器代码Vue.filter("formatDate", function (date, pattern = "") { var dt = new Da
复制链接

扫一扫

专栏目录