javascript - Vue.js 日期过滤器突出显示日期是否过期

Question

我有一个显示“漂亮”日期的 vue 过滤器。我希望过滤器在过期时以红色突出显示日期(日期小于当前日期)。有没有一种简单的方法可以在过滤器中执行此操作，或者我必须在页面中执行此操作？

我的过滤器如下所示:

Vue.filter("date", function (value) {
  if (value === null || value === undefined) {
    return value;
  } else {
    const date = new Date(value);
    return date.toLocaleDateString(['en-GB']);
  }
});

Answer 1

我会这样做:

您的模板:

Your text bla bla bla <span :style="overDue">{{date}}</span>

js:

data:{
    date: "01/02/2019"
}

computed: (){
    overDue(){
        if(){ // your handler for overDue check.
            return 'color:red'
        }else return 'color:blue'
    }
}