如何使用Vue.js的v-bind实现两个日期间的文本颜色动态绑定

完全可以通过v-bind:class实现该需求，你现有代码的核心问题有三个：

1. data中start属性定义错误，toLocaleDateString是方法需要加括号调用
2. 全局computed的today属性是固定值，无法适配循环中每行不同的到期日期判断
3. 模板中过滤器的传参语法错误

修正后的完整实现 #

组件代码 #

<template>
  <!-- 循环时绑定key，通过方法传入每行的到期日期计算对应class -->
  <tr 
    v-for="(item, i) in attributes" 
    :key="i"
    :class="getDateClass(item.due_date)"
  >
    <!-- 修正过滤器传参：| 前面是过滤器第一个参数，括号内是第二个参数 -->
    <td>{{ start | remainingday(item.due_date) }}</td>
  </tr>
</template>

<script>
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
    }
  },
  methods: {
    // 每行单独计算class的方法
    getDateClass(dueDate) {
      const startDate = new Date(this.start.split(".").reverse().join("."))
      const endDate = new Date(dueDate.split(".").reverse().join("."))
      const difDays = Math.floor((startDate.getTime() - endDate.getTime()) / (1000 * 3600 * 24))
      
      // 逾期返回红色类，当天返回today类，未逾期不添加类
      if (difDays > 0) return 'greater'
      if (difDays === 0) return 'today'
      return ''
    }
  },
}
</script>

<style>
/* 自定义对应class的颜色 */
.greater {
  color: #f5222d;
}
.today {
  color: #fa8c16;
}
</style>

全局过滤器（无需修改，保持原有逻辑即可） #

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`
});

逻辑说明 #

• 把原来的全局计算属性改成方法，传入每行的到期日期单独计算状态，适配循环列表的差异化判断
• 过滤器参数遵循Vue语法规则，第一个参数为管道符前的变量，后续参数放在过滤器后的括号内
• 样式可根据需求自定义调整，除了class绑定也可以直接用:style绑定color属性实现动态颜色设置

内容的提问来源于stack exchange，提问作者lidersin