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

最新推荐文章于 2025-07-02 17:56:51 发布

原创最新推荐文章于 2025-07-02 17:56:51 发布 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #filter #过滤器

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

项目中常常需要在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>