Vue.js 按日期过滤数组 - Javascript

在Vue.js中，我们可以使用过滤器来过滤数组中的数据。这篇文章将介绍如何按日期过滤数组。

步骤

1. 定义一个过滤器函数，在该函数中实现按日期过滤的逻辑。

Vue.filter('dateFilter', function (value, date) {
  const filtered = value.filter(item => {
    return item.date === date;
  });
  return filtered;
});

2. 在Vue组件中使用该过滤器来过滤数组。

<template>
  <div>
    <div v-for="item in filteredItems" :key="item.id">
      <p>{{item.title}}</p>
      <p>{{item.date}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {id: 1, title: 'Item 1', date: '2022-06-01'},
        {id: 2, title: 'Item 2', date: '2022-06-02'},
        {id: 3, title: 'Item 3', date: '2022-06-03'},
        {id: 4, title: 'Item 4', date: '2022-06-01'}
      ],
      dateToFilter: '2022-06-01'
    };
  },
  computed: {
    filteredItems() {
      return this.$options.filters.dateFilter(this.items, this.dateToFilter);
    }
  }
};
</script>

3. 在Vue组件中使用输入框来获取要过滤的日期。

<template>
  <div>
    <input type="date" v-model="dateToFilter">
    <div v-for="item in filteredItems" :key="item.id">
      <p>{{item.title}}</p>
      <p>{{item.date}}</p>
    </div>
  </div>
</template>

结论

在Vue.js中按日期过滤数组十分简单。只需定义一个过滤器函数并在组件中使用即可。通过输入框来获取要过滤的日期也很容易实现。