vue过滤器之设置日期格式

最新推荐文章于 2024-07-14 22:44:48 发布

原创最新推荐文章于 2024-07-14 22:44:48 发布 · 865 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html5 #javascript

Vue 专栏收录该内容

9 篇文章

订阅专栏

这篇博客介绍了如何在JavaScript中创建一个日期格式化工具函数`formatDate`，并将其作为过滤器应用于Vue.js应用中，以便在页面渲染时展示格式化的日期。通过新建js文件、引入工具函数、创建过滤器和在模板中使用过滤器，可以方便地将时间戳转换为'yyyy-MM-dd'格式的日期字符串。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

title:

一、创建工具

1.新建js文件，format.js:

export function formatDate (date, fmt) {
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(
      RegExp.$1,
      (date.getFullYear() + '').substr(4 - RegExp.$1.length)
    );
  }
  var o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds(),
    'q+': Math.floor((date.getMonth() + 3) / 3),
    S: date.getMilliseconds()
  }; // 月份 // 日 // 小时 // 分 // 秒 // 季度 // 毫秒
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + '';
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length === 1 ? str : ('00' + str).substr(str.length)
      );
    }
  }
  return fmt;
}

## 2.在页面引入(根据自己的实际路径)
```js
import { formatDate } from '../common/js/format.js';

## 3.创建过滤器
```js
filters: {
    formatDate (timestamp) {
      var data = new Date(timestamp);
      return formatDate(data, 'yyyy-MM-dd');
    }
  }

## 4.页面渲染数据时使用
```vue
<span>{{timestamp | formatDate}}</span>