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>

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • encode-decode结构

    encode-decode结构encode的输入是变长的序列向量,每个向量之间会在batch内填充为固定长度,神经网络限制,不能输入变长的向量。encode输出固定长度的向量,但序列数量和输入数量保持不变,也就是一个输入产生一个输出。每个输出之间是独立的。encode的网络可以不固定,比如常见nlp任务用rnn,。encode将可变序列编码为固定状态,decode将固定状态输入映射为其它可变序列。decode的网络可以不固定,其中ctc结合search策略也可以用来做decode。通用的“编码器-解码器”接口定义:fro.

  • app产品设计流程_APP流程图

    app产品设计流程_APP流程图App设计流程第一步、从APP产品需求入手,考虑我们到底要用什么主色调根据产品定位和目标用户群体选择主色调定好尺寸:设计尺寸是多大,是以640*1136设计还是750*1136还是1242*2208来设计。所有APP设计尺寸大小规范:http://www.25xt.com/appsize   第二步、配色和辅助色用什么颜色在考虑到产品气质和品牌色的同时,我们经常要考虑配合衬托产品主色调的辅助色…

  • 高德地图自定义marker图片相关[通俗易懂]

    高德地图自定义marker图片相关[通俗易懂]Android高德地图自定义点聚合marker图片及Overlay点击选中功能关于高德地图添加Marker遇到的一些坑-m0_37295672的博客-CSDN博客http://blog.csdn.net/m0_37295672/article/details/77851580为地图marker设置网络图片-m00123456789的博客-CSDN博客htt…

  • Android应用程序开发「建议收藏」

    Android应用程序开发「建议收藏」Android应用程序开发 第一章Android应用初体验1.1应用基础activity是AndroidSDK中Activity类的一个具体实例,负责管理用户与信息屏的交互。应用的功能是通过编写一个个Activity子类来实现的。布局定义了一系列用户界面对象以及它们显示在屏幕上的位置。组成布局的定义保存在XML文件中。…

  • 力扣题库练习

    力扣题库练习1给定一个整数数组nums和一个整数目标值target,请你在该数组中找出和为目标值target的那两个整数,并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是,数组中同一个元素在答案里不能重复出现。你可以按任意顺序返回答案。示例:输入:nums=[2,7,11,15],target=9输出:[0,1]解释:因为nums[0]+nums[1]==9,返回[0,1]本人简单暴力解答:vartwoSum=function(nums,

  • hibernate sql查询_sql server查询命令

    hibernate sql查询_sql server查询命令一.SQLQuery简介SQLQuery接口用于接受一个sql语句进行查询,然后调用list()或uniqueResult()进行查询。但是sql语句不会直接封装到实体对象里,需要手写代码才可以封装到实体中。二.SQLQuery常用接口方法addEntity()方法:该方法用于将查询到的结果集转换为你设置的实体类setter()方法:Query接口中提供了一系列的setter方法用于设置…

发表回复

您的电子邮箱地址不会被公开。

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