利用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.id
this.接口({ 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