Vuejs:日期 1 在日期 2 之后

Question

如果日期 1 在日期 2 之后，我正在尝试更改行的文本颜色。请问我们如何做到这一点。谢谢。

我试过这个，但它确实将所有东西都染成红色/危险。

<tr v-for="issue in issues" :key="issue.id"
:class="{'text-danger font-weight-bold': issue.datedue < new Date() }">
<td>{{ issue.firstname}} {{ issue.lastname}}</td>
<td>{{ issue.datedue }}</td>
<tr>

我也试过这个，但它不起作用

<tr v-for="issue in issues" :key="issue.id"
:class="{'text-danger font-weight-bold': (issue.datedue).after(new Date()) }">
<td>{{ issue.firstname}} {{ issue.lastname}}</td>
<td>{{ issue.datedue }}</td>
<tr>

编辑。。。 溶液： 我找到了一种让它工作的方法。我认为问题是 issue.date 的格式与新 Date(( 的格式不同......我认为。 这段代码有效。

<tr v-for="issue in issues" :key="issue.id"
:class="{'text-danger font-weight-bold': issue.datedue < new Date().toLocaleDateString('en-CA') }">

<td>{{ issue.firstname}} {{ issue.lastname}}</td>
<td>{{ issue.datedue }}</td>
<tr>

Answer 1

假设issue.datedue是Date实例或以毫秒为单位的时间戳，您可以使用大于比较来检查issue.datedue是否在现在之后。

我还建议将当前日期/时间存储在data属性中，这样您就不会不断计算它。

例如

new Vue({
el: '#app',
data: () => ({
issues: [{
id: 1,
firstname: 'Fred',
lastname: 'Flintstone',
datedue: new Date('2050-05-01T00:00:00Z') // after today
}, {
id: 2,
firstname: 'Barney',
lastname: 'Rubble',
datedue: new Date('2020-05-01T00:00:00Z') // before today
}],
now: new Date() // store "now"
}),
updated() {
this.now = new Date() // update if necessary
}
})

.font-weight-bold {
font-weight: bold;
}
.text-danger {
color: red;
}

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<table id="app" border="1">
<tr v-for="issue in issues" :key="issue.id" :class="{'text-danger font-weight-bold': issue.datedue > now }">
<td>{{ issue.firstname}} {{ issue.lastname}}</td>
<td>{{ issue.datedue }}</td>
</tr>
</table>

Answer 2

如果日期是常规的 js 日期，则通过比较每个日期的getTime()(自纪元以来的毫秒数(的值来比较它们。

var app = new Vue({
el: '#app',
data: {
now: new Date()
},
methods: {
// answer a date n days in the future (or past if n<0)
daysFromNow(n) {
let date = new Date(this.now.getTime())
date.setDate(date.getDate() + n)
return date
},
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<span :class="{ red : daysFromNow(-1).getTime() < daysFromNow(1).getTime()  }">
I should be red, because yesterday is less than tomorrow
</span>
<br/>
<span :class="{ red : daysFromNow(-1).getTime() > daysFromNow(1).getTime()  }">
I should be black, because yesterday is not greater than tomorrow
</span>
</div>
<style>
.red {
color: red;
}
</style>