Question

我正在根据该字段的日期范围（从今天的日期开始）突出显示<td>。

我一直在尝试使用小于<td>-＃（天数）的当前Date.now()日期值来确定是否突出显示<td>（绿色，黄色或红色）），但我的操作没有成功。

<td v-if="props.item.date < Date.now() - 2">
  <v-icon small style="color:green;">fiber_manual_record</v-icon>{{ props.item.date }}
</td>
<td v-else-if="props.item.date < Date.now() - 7">
  <v-icon small style="color:yellow;">fiber_manual_record</v-icon>{{ props.item.date }}
</td>   
<td v-else>
  <v-icon small style="color:red;">fiber_manual_record</v-icon>{{ props.item.date }}
</td>

我想认为我已经接近解决方案，但是我可能没有采取适当的方法。任何帮助将不胜感激。

更新2

<td v-if="Date.parse(props.item.date) > Date.now()">
   <v-icon small class="greenDate">fiber_manual_record</v-icon>{{ props.item.date_sent }}
</td>
<td v-else-if="Date.parse(props.item.date) < Date.now()">
   <v-icon small class="yellowDate">fiber_manual_record</v-icon>{{ props.item.date_sent }}
</td>   
<td v-else">
   <v-icon small class="redDate">fiber_manual_record</v-icon>{{ props.item.date_sent }}
</td>

尝试此只是为了测试，看看是否有任何东西甚至可以识别条件，而且看起来好像不是。始终达到最后一个条件（红色）。也许不像props.item.date格式的mm/dd/yyyy。我还意识到原始示例中的条件会发生冲突，因为我的生存时间都少于2天和7天，但是在7天的条件下，我的条件也没有超过2天

Answer 1

The Date.now() method returns the number of milliseconds

因此，如果您想减少某天。您必须隐蔽几天至毫秒，然后再减去。 1 day = 1000 * 60 * 60 * 24 * 1毫秒

The Date.parse() method parses a string representation of a date, and returns the number of milliseconds

使用Date.parse将props.item.date转换为毫秒

例如更改如下代码

<td v-if="Date.parse(props.item.date) < Date.now() - (2 * 1000 * 60 * 60 * 24)">
  <v-icon small style="color:green;">fiber_manual_record</v-icon>{{ props.item.date }}
</td>
<td v-else-if="Date.parse(props.item.date) < Date.now() - (7 * 1000 * 60 * 60 * 24)">
  <v-icon small style="color:yellow;">fiber_manual_record</v-icon>{{ props.item.date }}
</td>   
<td v-else>
  <v-icon small style="color:red;">fiber_manual_record</v-icon>{{ props.item.date }}
</td>

v-如果使用表格行字段和日期范围

1 个答案: