Vue使用filter过滤器格式化时间的两种方式

通常用new Date()实例对象时，默认调用的是toString()方法，返回的是一个字符串，需要把时间统一格式化为自己想要的格式，在vue中为我们提供了一个filter过滤器，去格式化自己想要的时间格式，本人用过两种方式去格式化时间，下面请看代码:(仅供参考)第一种格式化方法：第一种方法比较简单，主要是导入了一个moment.js插件，里面封装了格式化时间的方...

技术成长ing

9333人浏览 · 2018-12-10 18:50:15

技术成长ing · 2018-12-10 18:50:15 发布

通常用new Date()实例对象时，默认调用的是toString()方法，返回的是一个字符串，

需要把时间统一格式化为自己想要的格式，在vue中为我们提供了一个filter过滤器，

去格式化自己想要的时间格式，本人用过两种方式去格式化时间，下面请看代码:

(仅供参考)

第一种格式化方法：

第一种方法比较简单，主要是导入了一个moment.js插件，里面封装了格式化时间的方法

先看代码：

<!DOCTYPE html>
<html>
     <head>
	    <title>过滤器</title>
		<meta charset="utf-8">
	 </head>
	 <body>
	    <div id="app">
		    <h1>显示格式化时间</h1>
			<p>格式化前：{{date}}</p>
			<p>格式化后：{{date | dateStr}}</p>
			<p>只显示年月日：{{date | dateStr('YYYY-MM-DD')}}</p>
			<p>只显示时分秒：{{date | dateStr('HH:mm:ss')}}</p>
        </div>
        <script src="./js/vue.js"></script>
        <script src="./js/moment.js"></script>
        <script>
			//自定义过滤器
			/*Vue.filter('dateStr',function(value, format){
            return moment(value).format(format?format:'YYYY-MM-DD HH:mm:ss')
			})*/
			/*Vue.filter('dateStr',function(value, format){
			   return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
			})*/
			//es6传参方法,传入一个默认形参
			Vue.filter('dateStr',function(value, format='YYYY-MM-DD HH:mm:ss'){
			   return moment(value).format(format)
			})
            new Vue({
               el:"#app",
               data:{
                  date: new Date()
               }
            })
		</script>
	 </body>
</html>

效果图：

插件的链接：https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js

插件的官网：http://momentjs.com 可以去官网查看下具体用法

第二种格式化方法:

第二种方法比较复杂些，不过大概的原理都差不多，格式化的结果也和第一种是相同的，代码如下：

<!DOCTYPE html>
<html>
     <head>
	    <title>过滤器</title>
		<meta charset="utf-8">
	 </head>
	 <body>
	    <div id="app">
		    <h1>显示格式化时间</h1>
			<p>格式化前：{{date}}</p>
			<p>格式化后：{{date | dateFormat}}</p>
			<p>只显示年月日：{{date | dateFormat('YYYY-MM-DD')}}</p>
			<p>只显示时分秒：{{date | dateFormat('HH:mm:ss')}}</p>
        </div>
	    <script src="./js/vue.js"></script>
        <script>
             //调用vue中的过滤器，固定第一个参数为传入的要处理的数据data
             //Vue.filter('过滤器的名称',function(data){});
             //进行时间的格式化
             Vue.filter('dateFormat',function(dateStr,time){
                //得到特定的时间
                var date = new Date(dateStr);
                var year = date.getFullYear();
                //ES6语法填充：var month = (date.getMonth()+1).toString().padStart(2, '0');
                var month = date.getMonth()+1<10 ? '0'+ (date.getMonth()+1) : date.getMonth()+1;
                var day = date.getDate()<10 ? '0' + date.getDate() : date.getDate();
                var hh = date.getHours()<10 ? '0' + date.getHours() : date.getHours();
                var mm = date.getMinutes()<10 ? '0' + date.getMinutes() : date.getMinutes();
                var ss = date.getSeconds()<10 ? '0' + date.getSeconds() : date.getSeconds();

                //return `${year}-${month}-${day}`;
                
                if(time&&time.toLowerCase() === 'yyyy-mm-dd'){
                    return `${year}-${month}-${day}`;
                }else if(time&&time.toLowerCase() === 'hh:mm:ss'){
                    return `${hh}:${mm}:${ss}`;
                }else{
                    return `${year}-${month}-${day} ${hh}:${mm}:${ss}`;
                }
             });
             new Vue({
                   el:"#app",
                   data:{
                        date: new Date()
                   }
             })
		</script>
	 </body>
</html>

最后的结果和第一种相同。

大家如果有更好的意见欢迎提出～～

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^