Javascript Vuejs如何将日期与列表中的筛选器进行比较

我正在学习vujs，并在自己的示例中使用了过滤器和日期比较。 我在第二行得到了两个类似的字符串（日期为'2020-02-02'），我应该看到单词'today'，但它不起作用

为什么在模板中的

typeof

上，我的带过滤器的日期是数字

比较这些日期我做错了什么？它总是

false

你可以在下面看到的代码，或者

html:

---

不能使用这样的过滤器。如果您查看链接示例的浏览器控制台，其中充满警告：

vue.js:634[vue warn]：属性或方法“yymmdd”未在实例上定义，但在渲染期间被引用

这是因为它可以在两个地方使用：胡须插值和v-bind表达式（后者在2.1.0+中受支持）。过滤器应该附加到JavaScript表达式的末尾，由“管道”符号表示

将过滤器转换为常规方法，并使用computed属性一次性转换数据，而不是在模板中处理转换（在每次渲染时）

方法：{
日期（d）{
//转化
}
},
计算：{
转换数据（）{
返回此.info.map（i=>（{…i，日期：this.convertDate（i.date）}））
}
}

---

您不能使用这样的过滤器。如果您查看链接示例的浏览器控制台，其中充满警告：

vue.js:634[vue warn]：属性或方法“yymmdd”未在实例上定义，但在渲染期间被引用

这是因为它可以在两个地方使用：胡须插值和v-bind表达式（后者在2.1.0+中受支持）。过滤器应该附加到JavaScript表达式的末尾，由“管道”符号表示

将过滤器转换为常规方法，并使用computed属性一次性转换数据，而不是在模板中处理转换（在每次渲染时）

方法：{
日期（d）{
//转化
}
},
计算：{
转换数据（）{
返回此.info.map（i=>（{…i，日期：this.convertDate（i.date）}））
}
}

---

您只能在胡须插值和v-bind表达式（2.1.0+支持后者）中使用

过滤器。因此，它不能像您在
v-if
中使用的那样使用

您可以在方法中创建用于比较日期的函数，如下所示：

compareWithToday(date){
    return this.$options.filters.yymmdd(date) === this.todayIs;
}

然后使用此函数评估模板中的
v-if
标志

<span v-if="(item.date | yymmdd  === todayIs | yymmdd)" class="today">today</span>  

今天

上述内容应替换为以下内容：

<span v-if="compareWithToday(item.date)" class="today">today</span>

今天

以下是上述工作的JSFIDLE：

过滤器参考：
您只能在胡须插值和v-bind表达式中使用过滤器（后者在2.1.0+中受支持）。因此，它不能像您在
v-if
中使用的那样使用

您可以在方法中创建用于比较日期的函数，如下所示：

compareWithToday(date){
    return this.$options.filters.yymmdd(date) === this.todayIs;
}

然后使用此函数评估模板中的
v-if
标志

<span v-if="(item.date | yymmdd  === todayIs | yymmdd)" class="today">today</span>  

今天

上述内容应替换为以下内容：

<span v-if="compareWithToday(item.date)" class="today">today</span>

今天

以下是上述工作的JSFIDLE：

过滤器参考：
ohh，我认为v-if-statement更灵活，它支持过滤器。谢谢你的解释）那么simple@v-orlov vue中的模板语法没有那么灵活。有很多事情是你做不到的。看看这个：哦，我认为v-if-statement更灵活，它支持过滤器。谢谢你的解释）那么simple@v-orlov vue中的模板语法没有那么灵活。有很多事情是你做不到的。看看这个：谢谢！解决渲染时转换数据问题的好方法。真的对你有用！解决渲染时转换数据问题的好方法。对我来说真的很有用