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

问题:

在这里插入图片描述
转化为下方格式:
vue中时间显示问题,Sat Aug 01 2020 11:31:41 GMT+0800转化为2020-8-1 11:32:0_第1张图片

使用过滤器

过滤器只能用在{{}}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}`;
      }
  });

全部代码


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

你可能感兴趣的:(前端笔记)