Vue.js中如何根据日期条件实现文本颜色的条件渲染？

你之前用全局的isColor导致所有文本变红，核心问题是这个值是统一的，没有针对每个item单独计算。完全可以用方法或者返回函数的计算属性解决，让每个item单独判断日期差是否符合条件。

步骤1：实现工作日计算的判断逻辑 #

在组件的methods里写一个方法，接收当前item的创建日期和访问日期，计算两者之间的工作日天数，判断是否超过3天：

methods: {
  shouldHighlightRed(createdAt, visitDate) {
    // 将日期字符串转为Date对象（注意格式匹配后端返回值）
    const createdDate = new Date(createdAt);
    const visitDateObj = new Date(visitDate);

    let workDaysDiff = 0;
    let current = new Date(visitDateObj);

    // 从访问日期往创建日期遍历，统计工作日（排除周六、周日）
    while (current < createdDate) {
      const day = current.getDay();
      if (day !== 0 && day !== 6) { // 0=周日，6=周六
        workDaysDiff++;
      }
      current.setDate(current.getDate() + 1);
    }

    // 工作日差超过3天时返回true，触发红色样式
    return workDaysDiff > 3;
  }
}

步骤2：在模板中绑定动态样式 #

修改访问日期的插槽模板，给date-String组件绑定动态样式，调用上面的方法判断当前item是否需要变红：

<template v-slot:item.date_of_visit="{ item }" >
  <date-String 
    format="MM/DD/YYYY" 
    :value="item.date_of_visit"
    :style="{ color: shouldHighlightRed(item.created_at, item.date_of_visit) ? 'red' : 'inherit' }"
  />
</template>

可选：用计算属性实现（返回函数） #

如果你更倾向于用计算属性，可以让它返回一个函数来接收参数：

computed: {
  shouldHighlightRed() {
    return (createdAt, visitDate) => {
      const createdDate = new Date(createdAt);
      const visitDateObj = new Date(visitDate);

      let workDaysDiff = 0;
      let current = new Date(visitDateObj);

      while (current < createdDate) {
        const day = current.getDay();
        if (day !== 0 && day !== 6) {
          workDaysDiff++;
        }
        current.setDate(current.getDate() + 1);
      }

      return workDaysDiff > 3;
    };
  }
}

模板用法和上面完全一致，因为计算属性返回的是可调用的函数。

注意事项 #

• 确保日期字符串能被new Date()正确解析，如果后端返回格式特殊（比如不带时分秒的YYYY-MM-DD），可能需要手动调整格式转换逻辑。
• 若需要排除节假日，可额外维护一个节假日数组，在遍历日期时增加判断条件。

内容的提问来源于stack exchange，提问作者Gavin Teo Juen