时间戳

首页 > 解决方案 > 两个日期之间的 vuejs 样式绑定

javascript - 两个日期之间的 vuejs 样式绑定

问题描述

我想在两个日期后用 vue js 给文本颜色，但我找不到解决方案。示例：我想相应地将开始日期“今天”和结束日期“05.​​10.2021”设置为红色。但我想用 v-bind 做这个条件是否可能？

 <tr v-for="(item, i) in attributes" :class="today ? 'greater' : 'today'">
<td>{{ today ,item.due_date | remainingday}}</td>
</tr>

export default {
    data() {
        return {
            type: 'sales_invoices',
            attributes: [],
            start: new Date().toLocaleDateString,
        }
    },
async created() {
        const res = await this.callApi('get', this.type)
        if (res.status === 200) {
            this.attributes = res.data.data
        }
    },
computed: {
        today(){
            const startY = new Date(this.start.split(".").reverse().join("."))
            const end = new Date('05.10.2021'.split(".").reverse().join("."))
            const difDays = Math.floor((startY.getTime() - end.getTime()) / (1000 * 3600 * 24))
            return difDays > 0
        },
},

应用程序.js

Vue.filter('remainingday', function (startDate, endDate) {

    const start = new Date(startDate.split(".").reverse().join("."))
    const end = new Date(endDate.split(".").reverse().join("."))
      if(start.toDateString() === end.toDateString()) {
        return 'TODAY'
      } 
      const difDays = Math.floor((start.getTime() - end.getTime()) / (1000 * 3600 * 24))
      return difDays > 0 
        ? `PAYMENT DELAYED FOR ${difDays} DAYS `
        : `${difDays * -1} DAYS LEFT`
});

标签： javascriptvue.js

解决方案

您可以尝试使用类绑定和方法：

new Vue({
  el: '#demo',
  data(){
    return {
      start: new Date(),
      attributes: [{due_date: '30.10.2021'}, {due_date: '07.10.2021'}, {due_date: '03.10.2021'}]
    }
  },
  methods: {
    remainingday (startDate, endDate) {
      const dates = startDate.toLocaleDateString() + ' ' + endDate
      const start = new Date(startDate)
      const end = new Date(endDate.split(".").reverse().join("-"))
      if(start.toDateString() === end.toDateString()) return {dat: `${dates} - TODAY`, cl: 'today'}
      const difDays = Math.ceil((start.getTime() - end.getTime()) / (1000 * 3600 * 24))
      return difDays > 0 
        ? {dat: `${dates} - PAYMENT DELAYED FOR ${difDays} DAYS`, cl: 'greater'}
        : {dat: `${dates} - ${difDays * -1} DAYS LEFT`, cl: ''}
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false
.today {
  color: blue; 
}
.greater {
  color: red; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<table>
    <tr v-for="(item, i) in attributes" :key="i">
      <td :class="remainingday(start, item.due_date).cl">{{ remainingday(start, item.due_date).dat }}</td>
    </tr>
  </table>
</div>

推荐阅读