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

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

javascript 复制代码

<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