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

更新时间：2022年11月25日 09:28:32 作者：难遇你

时分秒都是跟月份一样,从0开始数的,不用+1,因为月是1-12月,而时分秒是0-23和0-59,下面这篇文章主要给大家介绍了关于vue中如何利用js函数截取时间的年月日时分秒的相关资料,需要的朋友可以参考下

前言

在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函数截取时间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue将秒数转成"时分秒"格式实例代码

vue实现的树形结构加多选框示例
这篇文章主要介绍了vue实现的树形结构加多选框,结合实例形式分析了在之前递归组件实现vue树形结构的基础之上再加上多选框功能相关操作技巧,需要的朋友可以参考下
2019-02-02
浅谈vue 移动端完美适配方案
最近接触了一个项目，vue怎么在不同屏幕上做根据不同屏幕大小适配，本文就详细的来介绍一下，感兴趣的可以了解一下
2021-09-09
Vue3实现简易音乐播放器组件
这篇文章主要为大家详细介绍了Vue3实现简易音乐播放器组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
Vue3中实现选取头像并裁剪
这篇文章主要详细介绍了在vue3中如何选取头像并裁剪，文章中有详细的代码示例，需要的朋友可以参考阅读
2023-04-04
详解Vue3中的watch侦听器和watchEffect高级侦听器
这篇文章主要介绍了Vue3中的watch侦听器和watchEffect高级侦听器,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-08-08
Vue 修改网站图标的方法
这篇文章主要介绍了Vue 修改网站图标的方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-12-12
el-tooltip根据条件控制显示的示例代码
这篇文章主要介绍了el-tooltip根据条件控制显示的示例代码,包括列表型和树状图型,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-12-12
Vue elementui字体图标显示问题解决方案
这篇文章主要介绍了Vue elementui字体图标显示问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-08-08
vue3缓存页面keep-alive及路由统一处理详解
当我们不想每次跳转路由都会重新加载页面时（重新加载页面很耗时）,就可以考虑使用keep-alive缓存页面了,这篇文章主要给大家介绍了关于vue3缓存页面keep-alive及路由统一处理的相关资料,需要的朋友可以参考下
2021-10-10
vue基于elementUI表格状态判断展示方式
这篇文章主要介绍了vue基于elementUI表格状态判断展示方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10