vue for循环取值时日期格式化问题_vue v-for 时间格式-优快云博客

本文链接：https://blog.youkuaiyun.com/syx_cainiao/article/details/109714189

在Vue项目中，遇到后台返回的日期格式为'yyyy-MM-dd hh:mm:ss'，需要将其转换为'yyyy-MM-dd'。通过使用自定义filters过滤器实现格式化，但在for循环中发现当月和日为单数时格式不统一。解决方案是在过滤器中添加判断，用'0'补足单数月份和日期，确保日期显示的一致性。

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

最近在写一个列表显示时，后台返回的数据时时间格式为 “yyyy-MM-dd hh:mm:ss”
如图：在这里插入图片描述

代码为：

<div v-for="(item,index) in showOpinionLists" :key="index" class="pagination-list">
	<!--此处代码省略-->
    ......
    <div class="pagination-date">
    	<div :style="item.status === '1' ? 'background-color: #5cbb5c;':'background-color: #409eff;'" class="handle-status">{{ item.status === '1' ?'已完结':'待处理' }}</div>
            <div class="handle-date">
              <span>{{ item.createtime }}</span>
            </div>
         </div>
    </div>
</div>

想要把时间格式改为 “yyyy-MM-dd”，因为时间显示时靠for循环来赋值的，这时就需要用到filters过滤器
代码如下：

filters: {
    formatDate(time) {
      var date = new Date(time);
      var year=date.getFullYear();
      var month=date.getMonth()+1;
      var date=date.getDate();
      return   year+"-"+month+"-"+date
    }
  },

<div class="handle-date">
    <span>{{ item.createtime | formatDate}}</span>
</div>

此时时间显示为在这里插入图片描述
但是月份month和日期date为单数时，日期格式不统一

此时就需要靠 ‘0’ 来补齐，代码为

formatDate(time) {
	var date = new Date(time);
    var year=date.getFullYear();
    var month=date.getMonth()+1;
    var date=date.getDate();
    return year+"-"+month.toString().padStart(2,'0')+"-"+date.toString().padStart(2,'0')
}