当前位置：首页 > news >正文

uniapp踩坑之项目：使用过滤器将时间格式化为特定格式

news 2025/8/4 22:29:50

利用filters过滤器对数据直接进行格式化，注意：与method、onLoad、data同层级

<template><div><!-- orderInfo.time的数据为：2023-12-12 12:10:23 --><p>{{ orderInfo.time | formatDate }}</p> <!-- 2023-12-12 --><p>{{ orderInfo.time | formatTime }}</p> <!-- 12:10:23 --><p>{{ orderInfo.time | formatDateTime }}</p> <!-- 2023-12-12 12:10:23 --></div>
</template><script>
export default {data() {return {orderInfo: [],}},onLoad (options) {if (options.id) {let Id = options.idthis.接口({ Id }).then(res => {this.orderInfo = res.data.data})}},// 过滤器filters: {formatDate (value) {// ios部分机型无法识别版// const date = new Date(value);// return date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate();// 兼容版if (value != undefined) {return value.substring(0, value.indexOf(' '))}},formatTime (value) {// ios部分机型无法识别版// const time = new Date(value);// return time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();// 兼容版if (value != undefined) {const year = value.substr(0, 4); // 年const index = value.indexOf("-");const lastIndex = value.lastIndexOf("-");let interval = parseInt(lastIndex) - (parseInt(index) + 1); // 间隔const month = value.substr((parseInt(index) + 1), interval); // 月let space = value.indexOf(" "); // 空格interval = parseInt(space) - parseInt(lastIndex);const day = value.substr(parseInt(lastIndex) + 1, interval); // 日let colon = value.indexOf(":"); // 冒号interval = parseInt(colon) - (parseInt(space) + 1);const hour = value.substr(parseInt(space) + 1, interval);const colon2 = value.lastIndexOf(":");interval = parseInt(colon2) - (parseInt(colon) + 1);const minutes = value.substr(parseInt(colon) + 1, interval);const colon3 = value.lastIndexOf(":");const seconds = value.substr(parseInt(colon3) + 1);return hour + ":" + minutes + ":" + seconds; // 时分秒}},formatDateTime (value) {// ios部分机型无法识别版// const datetime = new Date(value);// const date = datetime.getFullYear()+'-'+(datetime.getMonth()+1)+'-'+datetime.getDate();// const time = datetime.getHours() + ":" + datetime.getMinutes() + ":" + datetime.getSeconds();// return date + ' ' + time;// 兼容版if (value != undefined) {const year = value.substr(0, 4); // 年const index = value.indexOf("-");const lastIndex = value.lastIndexOf("-");let interval = parseInt(lastIndex) - (parseInt(index) + 1); // 间隔const month = value.substr((parseInt(index) + 1), interval); // 月let space = value.indexOf(" "); // 空格interval = parseInt(space) - parseInt(lastIndex);const day = value.substr(parseInt(lastIndex) + 1, interval); // 日let colon = value.indexOf(":"); // 冒号interval = parseInt(colon) - (parseInt(space) + 1);const hour = value.substr(parseInt(space) + 1, interval);const colon2 = value.lastIndexOf(":");interval = parseInt(colon2) - (parseInt(colon) + 1);const minutes = value.substr(parseInt(colon) + 1, interval);const colon3 = value.lastIndexOf(":");const seconds = value.substr(parseInt(colon3) + 1);return year + "-" + month + "-" + day + hour + ":" + minutes + ":" + seconds; // 年月日时分秒}}}
}
</script>

上一篇文章，

uniapp踩坑之项目：隐藏显示密码功能-CSDN博客文章浏览阅读398次。uniapp踩坑之项目：隐藏显示密码功能，1.input组件的password设置为动态前面加:冒号；2.动态切换眼睛图标使用:stylehttps://blog.csdn.net/weixin_43928112/article/details/134315684?spm=1001.2014.3001.5501