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'
    }
}

Answer 2

看看 VueJS 过滤器文档

Vue.js 允许您定义可用于应用常见文本格式的过滤器。

但是您需要的是具有某种条件的样式绑定。

可以定义一个检查日期是否有效的方法，然后在样式绑定中调用该方法。

<span v-bind:style="{color: !isValidDate(date) ? '#F00' : '#000'}">{{date}}</span>