Vue配合Pug开发时如何将字符串日期转为日期类型并对比

你遇到的问题分为两个核心错误：

1. 字符串转日期时报Invalid Date：是因为你给new Date()传了带引号的变量名"event.details.meta.date"，相当于传入了普通字符串而非变量值，自然无法解析为合法日期。
2. 调用时报isEventActive is not a function：是因为Vue的计算属性默认是不带参数的属性，而非可调用方法，不能直接传参使用。

解决方案 #

方案1：将判断逻辑放入methods（更推荐，适合列表循环/多参数判断场景） #

Pug模板部分无需修改，保持原有调用写法：

div(v-if="isEventActive(event.details.meta.date)")

将isEventActive从computed移到methods中即可：

methods: {
  isEventActive(_eventDate) {
    // 转成时间戳对比可以避免时区/时间精度导致的判断误差
    const eventTime = new Date(_eventDate).getTime()
    return Date.now() < eventTime
  }
}

方案2：计算属性返回闭包（适合需要缓存计算结果的场景） #

如果你需要保留计算属性的缓存特性，可以让计算属性返回一个可接收参数的函数：

computed: {
  isEventActive() {
    return (_eventDate) => {
      const eventTime = new Date(_eventDate).getTime()
      return Date.now() < eventTime
    }
  }
}

补充：时区兼容处理 #

YYYY-MM-DD格式的字符串传入new Date()时，会默认按照UTC时区解析，可能和你所在的本地时区产生差值。如果需要按自然日对比日期，建议统一日期的时间部分：

isEventActive(_eventDate) {
  // 当前日期去掉时分秒，统一为当天0点
  const today = new Date(new Date().toLocaleDateString()).getTime()
  const eventDate = new Date(_eventDate).getTime()
  return today < eventDate
}

额外修正 #

你之前在Pug中直接插值转日期的正确写法为（去掉变量外的引号）：

div #{new Date(event.details.meta.date)}

内容的提问来源于stack exchange，提问作者Steve