vue中如何利用js函数截取时间的年月日时分秒

目录
  • 前言
  • 解决方法:
    • 1. 使用自定义函数格式化时间数据:
    • 2. 利用substring函数截取:
    • 3. 利用left函数截取
    • 4. 利用right函数截取
  • 总结

前言

在vue中,从后台获取数据,如果不是sql语句(类似:select convert(char(10),GetDate(),120) as Date)获取的数据,在前台就会出现如下情况:

解决方法:

1. 使用自定义函数格式化时间数据:

(1)年月日:

       var timearr = time.replace(" ", ":").replace(/\:/g, "-").split("-");
       var timestr = timearr[0]+"年"+ Number(timearr[1])+ "月" + timearr[2]+"日";

(2)时分

       var timearr = time.replace(" ", ":").replace(/\:/g, "-").split("-");
       var timestr = ""+timearr[3]+ " :" + timearr[4]+" ";

完整时间截取的方法:

     getPartTime(val){
          // let ti = val.split(' ');
          var timearr = val.replace(" ", ":").replace(/:/g, "-").split("-");
          var timestr = ""+ Number(timearr[1])+ "月" + timearr[2]+"日";
          // console.log(4444,val)
          return timestr;
     },

数据调用:

          <detail-list-item term="楼栋名称">{{ item.buildingName }}</detail-list-item>
          <detail-list-item term="楼栋编号">{{ item.buildingNo }}</detail-list-item>
          <detail-list-item term="楼栋位置">{{ item.buildingAddress }}</detail-list-item>
          <detail-list-item term="楼栋总面积">{{ item.buildingArea }}</detail-list-item>
          <detail-list-item term="GPS经度">{{ item.longitude }}</detail-list-item>
          <detail-list-item term="GPS纬度">{{ item.latitude }}</detail-list-item>
          <detail-list-item term="楼栋总层数">{{ item.floorCnt }}</detail-list-item>
          <detail-list-item term="包含公司数">{{ item.companyNumb }}</detail-list-item>
          <detail-list-item term="楼栋管家">{{ item.buildingSteward }}</detail-list-item>
          <detail-list-item term="建造时间">{{ getPartTime(item.buildingTime) }}</detail-list-item>

格式化后数据:

自定义函数方法的好处是任何地方都可以调用这个函数进行数据格式化。

2. 利用substring函数截取:

可以先使用console.log打印数据显示数据是否符合要求:

    console.log(this.buildings[0].buildingTime.substring(0, 10))

完整截取代码如下:

GetEnterpriseData(1).then(response => {
        this.enterprisedata = response.result
        this.buildings = this.enterprisedata[0].buildings
        // console.log(this.buildings[0].buildingTime.substring(0, 10))
        for (let i = 0; i < 10; i += 1) {
           this.buildings[i].buildingTime = this.buildings[i].buildingTime.substring(0, 10)
            console.log(this.buildings[i].buildingTime)
        }
        // console.log('qqqq', this.enterprisedata)
      })

或者:

<detail-list-item term="楼栋管家">{{ item.buildingSteward }}</detail-list-item>
<detail-list-item term="建造时间" >{{ item.buildingTime.substring(0, 10) }}</detail-list-item>

截取后控制台打印数据:

3. 利用left函数截取

LEFT(string,length)函数

从字符串string中,从第一个字符开始,自左向右,截取长度为length的子串。

举个例子,string为 ‘ABCDEFG’,length为3,那么截取的子串就是’ABC’了。

4. 利用right函数截取

与上面函数类似,只是方向自右向左,例子同上,截取的子串就是’EFG’了。

总结

到此这篇关于vue中如何利用js函数截取时间的年月日时分秒的文章就介绍到这了,更多相关vue用js函数截取时间内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue时间格式化实例代码

    整理文档,搜刮出一个vue时间格式化实例代码,稍微整理精简一下做下分享. export function formatDate(date, fmt) { if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } let o = { 'M+': date.getMonth() + 1, 'd+': date.getDate(), 'h

  • vue.js实现格式化时间并每秒更新显示功能示例

    本文实例讲述了vue.js实现格式化时间并每秒更新显示功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=

  • vue中如何利用js函数截取时间的年月日时分秒

    目录 前言 解决方法: 1. 使用自定义函数格式化时间数据: 2. 利用substring函数截取: 3. 利用left函数截取 4. 利用right函数截取 总结 前言 在vue中,从后台获取数据,如果不是sql语句(类似:select convert(char(10),GetDate(),120) as Date)获取的数据,在前台就会出现如下情况: 解决方法: 1. 使用自定义函数格式化时间数据: (1)年月日: var timearr = time.replace(" ", &

  • JS获取当前时间的年月日时分秒及时间的格式化的方法

    1.获取当前时间 var myDate = new Date(); 2.获取时间中的年月日时分秒 myDate.getYear(); // 获取当前年份(2位) myDate.getFullYear(); // 获取完整的年份(4位,1970-????) myDate.getMonth(); // 获取当前月份(0-11,0代表1月) myDate.getDate(); // 获取当前日(1-31) myDate.getDay(); // 获取当前星期X(0-6,0代表星期天) myDate.g

  • 用js实现每隔一秒刷新时间的实例(含年月日时分秒)

    原理:使用定时器,即setInterval(fn,i),每隔i秒执行fn. 下面给出具体的代码 1.代码如下: <span style="font-size:14px;"><!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>用js实现每隔一秒刷新时间(含年月日时分秒)</tit

  • Android 用Time和Calendar获取系统当前时间源码分享(年月日时分秒周几)

    概述 用Time和Calendar获取系统当前时间(年月日时分秒周几) 效果图 源码: import android.app.Activity; import android.os.Bundle; import android.text.format.Time; import android.view.View; import android.widget.RelativeLayout; import android.widget.TextView; import java.util.Calen

  • Vue中的异步组件函数实现代码

    具体代码如下所示: export default new Router({ routes: [ { path: '/live', name: 'live', component: () => import('@/view/live/live.vue') } ] }) 上面的代码是很常见的router代码分割,只在代码路由为live才会去加载live.vue 但这样在live.vue获取的过程将是一片空白,什么也没有,体验不好, 利用vue提供的异步组建可以解决 新建一个 loadable.vue

  • vue中根据时间戳判断对应的时间(今天 昨天 前天)

    根据时间戳 来显示对应的时间段 本文是根据vue缩写,但是原理都是想通的 根据一个时间戳,然后来显示对应的时间段.如果为今天,则显示对应的time,如果为昨天,则显示为昨天,如果为前天,则显示为前天.剩下的显示为对应的日期 需求定义好了,然后开始实现: 首先,是把时间戳转换为对应的时间格式,js提供了原生的获取对应年.月.日等格式的方法,但是不够灵活,这里提供了一个网上找的比较灵活获取固定格式的函数. const formatDate = (date, fmt) => { date = new

  • vue 中使用print.js导出pdf操作

    1.print.js // 打印类属性.方法定义 /* eslint-disable */ const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); if ((typeof dom) === "string") {

  • Vue中util的工具函数实例详解

    Vue中util的工具函数,下面通过实例代码给大家介绍的非常详细,具体代码如下所示: // 防抖函数 function debounce (fn, wait) { let t return () => { let context = this let args = arguments if (t) clearTimeout(t) t = setTimeout(() => { fn.apply(context, args) }, wait) } } function flatten (arr)

  • Vue中使用 setTimeout() setInterval()函数的问题

    在vue点击事件调用函数的过程中,想通过 setTimeout() setInterval()函数来延迟修改参数时,发现函数没有执行,控制台也没有报错,代码如下: var vm_target = new Vue({ el: '#vm_target', data: { clickSubmitBtn:false }, methods:{ myFunc:function(){ setTimeout(function(){ this.clickSubmitBtn = true; //此处修改data中的

  • vue中使用vue-print.js实现多页打印

    本文主要介绍了vue项目中使用print.js打印,解决多页,分页,打印预览样式修改等问题. 引入安装vue-print.js cnpm i vue-printjs --save-dev 解决打印多页只出现一页问题 由于打印插件存在问题,如果打印文件超出一页,只显示一页,所以我们需要修改print.js源文件,所以只能手动下载vue-print.js到本地,做一些修改,然后引入到项目中,不能使用npm安装 下载 print.js https://github.com/zxc19890923/pr

随机推荐