uniapp时间格式和距离格式的转换
更新时间：2023年09月21日 15:31:25 作者：爱健身的小刘同学
这篇文章主要介绍了uniapp时间格式和距离格式的转换,第一种是把 YYYY-MM-DD hh:mm:ss 转换成 MM月DD日,第二种是把 hh:mm:ss 转换成 hh:mm,本文给大家介绍的非常详细,需要的朋友可以参考下
时间格式的转换
第一种是把 YYYY-MM-DD hh:mm:ss 转换成 MM月DD日
第二种是把 hh:mm:ss 转换成 hh:mm
/**
* 格式化时间 1
* 把传入的完整时间分为 MM月DD日 的格式
* @returns
*/
export function formatDate(timeStr) {
const date = new Date(timeStr);
const month = (date.getMonth() + 1).toString().padStart(2, "0"); // 获取月份，并补齐为两位
const day = date.getDate().toString().padStart(2, "0"); // 获取日期，并补齐为两位
return `${month}月${day}日`;
}
/**
* 格式化时间 2
* 把hh:mm:ss变为 hh:mm 的格式
* @returns
*/
export function formatHour(timeStr) {
return timeStr.split(':').slice(0, 2).join(':');
}距离格式
因为获取到的格式是 以m 为单位的
我们需要的效果是 以km为单位 所以需要对数据进行处理
希望得到的值为 11.1km 这种 保留一位小数
如果当得到的值小于1km 的时候 就显示本身 不用去转换
{{ formatDistance(item.distance) }}
export default {
methods: {
formatDistance, // 将函数添加到组件的 methods 中
},
}
// 把这段放到utils文件内 方便复用
formatDistance(distance) {
if (distance >= 1000) {
// 大于等于 1000 米时，转换为千米
return (distance / 1000).toFixed(1) + 'km';
} else {
// 小于 1000 米时，直接显示米
return distance + 'm';
}
},到此这篇关于uniapp时间格式和距离格式的转换的文章就介绍到这了,更多相关uniapp时间格式转换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了JavaScript仿百度切换皮肤功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要介绍了Bootstrap模态框案例解析,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
一些柱形图在数据量比较多的时候,横向排列受到挤压,导致柱形图,变的非常细,影响整体的效果,下面这篇文章主要给大家介绍了关于echarts柱状堆叠图(图例和x轴都是动态的)的相关资料,需要的朋友可以参考下2023-04-04
关于Aptana Studio生成自动备份文件的解决办法2009-12-12
最近在开发一些大屏,涉及到比较多的数据来源,接口也没有做聚合,导致页面需要调很多接口来填充页面数据,那么就会有接口并发的问题出现,所以本文给大家介绍了如何解决前端请求并发和请求覆盖,需要的朋友可以参考下2024-10-10
本文对如何利用iframe标签以及js制作时钟进行了全面解析，分步说明，条理清晰，感兴趣的朋友可以看下2016-12-12
JavaScript实现Blob、File、ArrayBuffer、base64、URL之间互转方法
在JavaScript中处理二进制数据时,我们常常会遇到需要将Blob对象转换成File对象的情况,这篇文章主要介绍了JavaScript实现Blob、File、ArrayBuffer、base64、URL之间互转方法的相关资料,需要的朋友可以参考下2026-05-05
本文为大家介绍下使用JS+JSP实现checkBox全选，下面有个不错的示例，感兴趣的朋友可以参考下2014-01-01
本文讲述TypeScript如何实现类型安全的路由系统,路由类型结构、使用infer和Extract提取参数类型、定义路由配置类型、创建路由表、实现类型安全的导航和位置钩子等,使用React Router v6或Next.js App Router,结合zod进行查询参数验证,以实现类型安全的路由系统2025-10-10
这篇文章主要介绍了ES6中Symbol、Set和Map用法,结合实例形式详细分析了ES6中Symbol、Set和Map的功能、使用方法及相关操作注意事项,需要的朋友可以参考下2019-08-08
最新评论