vue中时间戳转日期格式化的方法(一看就会)「建议收藏」

vue中时间戳转日期格式化的方法(一看就会)「建议收藏」一.利用vue的filter过滤器这里用到的是局部过滤器首先需要安装moment时间插件moment文档npminstallmoment然后在需要过滤的文件中引入moment时间插件importmomentfrom’moment’;代码如下<template><div><divclass=”admin-apply-time”>{{content.create_time|timeFilter}}</div><

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

一. 利用vue的filter过滤器

这里用到的是局部过滤器
首先需要安装moment时间插件 moment文档

npm install moment

然后在需要过滤的文件中引入moment时间插件

import moment from 'moment';

代码如下

<template>
<div>
  <div class="admin-apply-time">{ 
   { 
   content.create_time | timeFilter}}</div>
</div>
</template>

<script>
import moment from 'moment'
export default { 
   
  props: { 
   
    content: { 
   
      type: Object,
      default: () => { 
   }
    }
  },
  data () { 
   
    return { 
   

    }
  },
  filters: { 
   
    timeFilter (val) { 
   
      return moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style>

</style>

二. 调用函数方法

<template>
  <div>
    <mytable
      :columns="columns"
      :renderData="renderData"
    >
      <template #add="scope">
        { 
   { 
    filterTime(scope.row.add_time) }}
      </template>
    </mytable>
  </div>
</template>

<script>
import mytable from "@/components/table/index.vue";
import moment from "moment";
export default { 
   
  data() { 
   
    return { 
   
      columns: [],
      renderData: [], // 表格数据
    };
  },
  methods: { 
   
    filterTime(value) { 
   
      if (value != null || value != "") { 
   
          let val = value + "000";
          let momentObj = moment(val * 1).format("YYYY-MM-DD HH:mm:ss");
          return momentObj;
      }else{ 
   
      return '';
    }
  },
  components: { 
   
    mytable
  }
};
</script>

<style lang="scss" scoped></style>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/180179.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • inserted和deleted表_beingdeleted

    inserted和deleted表_beingdeletedcreatetriggerupdateDeleteTimeonuserforupdateasbeginupdateusersetUpdateTime=(getdate())from

    2022年8月4日
  • matlab中wavedec2函数,小波滤波器–wavedec2函数[通俗易懂]

    matlab中wavedec2函数,小波滤波器–wavedec2函数[通俗易懂]wavedec2函数:1.功能:实现图像(即二维信号)的多层分解.多层,即多尺度.2.格式:[c,s]=wavedec2(X,N,’wname’)[c,s]=wavedec2(X,N,Lo_D,Hi_D)(我不讨论它)3.参数说明:对图像X用wname小波基函数实现N层分解,这里的小波基函数应该根据实际情况选择,具体办法可以:db1、db2、……db45、haar.输出为c,s.c为各层分…

    2022年6月28日
  • ANSI编码对照表「建议收藏」

    ANSI编码对照表「建议收藏」目前计算机中用得最广泛的字符集及其编码,是由美国国家标准局(ANSI)制定的ASCII码(AmericanStandardCodeforInformationInterchange,美国标准信息交换码),它已被国际标准化组织(ISO)定为国际标准,称为ISO646标准。适用于所有拉丁文字字母,ASCII码有7位码和8位码两种形式。因为1位二进制数可以表示(21=)2种状态:0、1;而2位二进制数可以表示(22)=4种状态:00、01、10、11;依次类推,7位二进制数可以表示(27=)128种

    2022年9月23日
  • findindex方法_find函数怎么用

    findindex方法_find函数怎么用findIndex(fn)方法:(注意:1.不需要return2.参数fn就是检索条件)返回在数组中查找符合条件第一个元素的index索引。vararr=[12,16,18,20]letindex=arr.findindex((item)=>{ item>=18})//打印index为2…

    2022年10月30日
  • SpringBoot 配置文件的静态装配「建议收藏」

    SpringBoot 配置文件的静态装配「建议收藏」上一篇讲了配置文件的自动装配,这一片讲一下静态装配 importlombok.Data;importorg.springframework.beans.factory.annotation.Value;importorg.springframework.boot.context.properties.ConfigurationProperties;importorg.springframework.stereotype.Component;@Component@Configurati

    2022年10月26日
  • extremedb是开源的吗_最简单的数据库开发软件

    extremedb是开源的吗_最简单的数据库开发软件最近我接触了嵌入式数据库eXtremeDB,由于这方面资料很少,网上的参考资料都大同小异,只靠着软件本身提供的参考文档进行开发,所以刚开始开发有些困难。故将基本的用法整理一下。关于eXtremeDB的特性,这里就不阐述了,直接从开发开始。下面以简单的模板为例进行阐述。1.构建.mco文件打开记事本,然后另存为XX.mco后缀文件。.mco文件里面需要定义数据库所需的字段类型,名称等,…

    2022年10月14日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号