Vue 2.0 如何格式化日期

通过这两天对vue的学习，我发现在vue中引用时间组件时，vue会自动匹配系统内部的日期格式。例如：

var date = new Date()

那么，这样显示的日期就会是

这样的格式真的很丑，所以我们要更改成我们想要的格式。常见的格式有两种，一种是 yyyy-mm-dd, 另一种是 yyyy-mm-dd HH:mm:ss。下面我们就讲解如何将默认的日期格式更改为这两种常见的时间格式。

1.创建过滤器

Vue 2.0中为我们提供了 filter 过滤器组件，这个组件可以将变量数据转换为我们想要的格式。因此我们创建在filter组件中创建一个名为 DateFormat 的格式化函数。

filters: {
             
        DateFormat: function (value, pattern='') {
     	// 根据给定的字符串，得到特定的日期
        var date = new Date(value);
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
       	var day = date.getDate();
       	return year + '-' + month + '-' + day;
       	}
                    
    }

这样我们就得到了一个yyyy-mm-dd格式的时间

但这里有一个问题，我们想要单位数的数字前面加上一个0，这样日期上更加统一。这里有两种方法来给单位数补零，我们一一展示。

2.为单位数补0

1.在script中添加补0函数 padDate()

// 格式化日期
var padDate = function (value) {
    return value < 10 ? '0' + value : value
    }

然后引入到之前创建的DateFormat中

DateFormat: function (value, pattern='') {
     	// 根据给定的字符串，得到特定的日期
        var date = new Date(value);
        var year = date.getFullYear();
        var month = padDate(date.getMonth() + 1);
       	var day = padDate(date.getDate());
       	return year + '-' + month + '-' + day;
       	}

这样我们再看看时间显示

这样，我们就完善了日期格式。
但是这么有点臃肿，因为我们为了实现日期格式化多加了一个限定函数，这样会增加代码的长度。其实，我们还有第二个方法，新的ES6中自带了一个能够补零的方法。


2. 使用padStart()函数

DateFormat: function (value, pattern='') {
     	// 根据给定的字符串，得到特定的日期
        var date = new Date(value);
        var year = date.getFullYear();
        var month = (date.getMonth() + 1).toString().padStart(2,'0');
       	var day = date.getDate().toString().padStart(2,'0');
       	return year + '-' + month + '-' + day;
       	}

该方法是在字符串前使用 fillString填充，直到字符串长度为 maxLength,这样字符串就自动在单位数前面补0.

详细时间的日期格式

方法和之前的是一样的，我就直接放代码了。

DateFormat: function (value) {
     	// 根据给定的字符串，得到特定的日期
        var date = new Date(value);
        var year = date.getFullYear();
        var month = padDate(date.getMonth() + 1);
       	var day = padDate(date.getDate());
       	var hour = padDate(date.getHours());
        var min = padDate(date.getMinutes());
        var sec = padDate(date.getSeconds());
       	return  `${year}-${month}-${day} ${hour}:${min}:${sec}`;
       	}

实例图片：