Vuejs：日期 1 在日期 2 之后

Question

如果 date1 在 date 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 的格式与 new 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 实例或以毫秒为单位的时间戳，您可以使用greater- 检查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>