Vuejs如何将日期与列表中的过滤器进行比较

Question

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

为什么在 typeof 模板中，我的带过滤器的日期是数字？
我在比较这些日期时做错了什么？总是 false.

您可以在此处查看代码或 https://jsfiddle.net/2awtdny4/9/

html:

<div id="app">

<div v-for="item in info">
  <div>
    <!-- I compare 2 dates as strings, and if it's true, I want to show word 'Today'  -->
    <span v-if="(item.date | yymmdd  === todayIs | yymmdd)" class="today">today</span>  
    <!-- else I want to show date as yyyy-mm-dd -->
    <span v-else>{{item.date | yymmdd}}</span>

    <!-- for some reason with filter date is NUMBER. why? in method and filter they should be stings -->
    <span>{{ typeof (item.date | yymmdd)}}</span>
    <span>{{ typeof (todayIs)}}</span>
  </div>
</div>

</div>

vue:

new Vue({
  el: "#app",
  data: {
    info: [
      { date: "2020-02-01 10:00", text: "first text" },  // date format from backend
      { date: "2020-02-02 15:00", text: "second text" },
      { date: "2020-02-03 15:00", text: "third text" },
      { date: "2020-02-04 18:00", text: "fourth text" },
    ],
    todayIs: null
  },
  methods: {
     today() {
        var today = new Date(),
          todayDate = ('0'+today.getDate()).slice(-2),
          todayMonth = ('0'+ (today.getMonth() + 1) ).slice(-2),
          todayYear = today.getFullYear();

        var day = '';
        day = todayYear + '-' + todayMonth + '-' + todayDate;

        this.todayIs = day;
    }
  },
  filters: {
    // cut yyyy-mm-dd format and return date as string
    'yymmdd': function (date) { 
      var newDay = new Date(date),
          currentDate = ('0'+newDay.getDate()).slice(-2),
          currentMonth = ('0'+ (newDay.getMonth() + 1) ).slice(-2),
          currentYear = newDay.getFullYear();

      var day = '';
      day = currentYear + '-' + currentMonth + '-' + currentDate;

      return day;
    }
  },
  created: function () {
      this.today()
  },
})

Answer 1

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

vue.js:634 [Vue warn]: Property or method "yymmdd" is not defined on the instance but referenced during render.

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

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

methods: {
  convertDate(d) {
    // conversion
  }
},
computed: {
  convertedData() {
      return this.info.map(i => ({ ...i, date: this.convertDate(i.date)}))
  }
}

Sample

Answer 2

您只能在 mustache 插值和 v-bind 表达式（后者在 2.1.0+ 中支持）中使用 filters。因此不能像在 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>

这是上面的工作 jsfiddle：https://jsfiddle.net/17mp6ofe/

过滤器参考：https://vuejs.org/v2/guide/filters.html

Vuejs如何将日期与列表中的过滤器进行比较

Vuejs how to compare dates with filter in list

javascript

vue.js

vue-filter