在vue template模板{{xxx}}中的数据进行格式化处理

本文介绍了在Vue项目中如何利用内置的filters功能,对从后台获取的原始日期数据进行格式化处理,以提高用户体验。通过创建`createformat`和`updateformat`两个过滤器,分别将`createTime`和`updateTime`字段转化为易读的日期和时间格式,例如'YYYY/MM/DD'和'MM/DD HH:mm'。这种方法简化了模板内的数据处理,使得日期和时间展示更加直观。

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

项目中常常需要在tempalte模板中使用函数或其它函数包直接对模板内的后端接口数据进行处理。而将数据中的某个字段统一筛出来后再处理又太麻烦。

故用到了vue中的filters过滤器对template模板中的时间直接进行过滤格式化。

这里以Vue格式化日期为例。

后台返回格式化前的日期:

在这里插入图片描述

filters过滤处理后的日期:

在这里插入图片描述

上代码:

<template>
  <div class="contain">
    <div class="tableArea">
      <el-table v-loading="loading" :data="tableData" stripe>

        <el-table-column prop="createTime" label="数据日期" min-width="180">
          <template slot-scope="scope">
            <div>
              {{ scope.row.createTime | createformat() }}
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="updateTime" label="上传时间" min-width="180">
          <template slot-scope="scope">
            <div>
              {{ scope.row.updateTime | updateformat() }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
import tips from '../../components/tips';

export default {
  filters: {
    createformat(val) {
      return moment(val).format('YYYY/MM/DD');
    },
    updateformat(val) {
      return moment(val).format('MM/DD HH:mm');
    },
  },
 
</script>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值