Vue中的过滤器（filter），Vue过滤器来实现输入内容与数组元素的匹配，而不改变原数组内容，输入框检索功能

 

在做检索时，很容易遇到数据自动匹配、检索的功能，就是过滤器。通俗来讲就是：用户输入内容与数组元素的匹配，而不改变原数组内容，输入框检索功能。如下图：

直接给大家两个案例，元数据一个是数组，一个是对象的情况。

假设匹配的是TItle字段。

数组：

<template>
  <div>
    <input v-model="searchInput" type="text" placeholder="输入内容" />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchInput: '',
      items: [
        { id: 1, title: '标题1' },
        { id: 2, title: '标题2' },
        { id: 3, title: '标题3' },
        { id: 4, title: '标题4' },
      ],
    };
  },
  computed: {
    filteredItems() {
      if (this.searchInput) {
        // 使用输入内容与标题进行匹配
        return this.items.filter(item =>
          item.title.toLowerCase().includes(this.searchInput.toLowerCase())
        );
      } else {
        return this.items;
      }
    },
  },
};
</script>

另一个是对象的情况。也就是上面items是一个对象，并且在过滤时需要将其转换为数组进行匹配，可以使用Object.values()方法将对象的值转换为数组，然后再进行过滤。下面是修改后的示例代码：

<template>
  <div>
    <input v-model="searchInput" type="text" placeholder="输入内容" />
    <ul>
      <li v-for="item in filteredItems" :key="item.key">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchInput: '',
      items: {
        1: { key: 1, title: '标题1' },
        2: { key: 2, title: '标题2' },
        3: { key: 3, title: '标题3' },
        4: { key: 4, title: '标题4' },
      },
    };
  },
  computed: {
    filteredItems() {
      if (this.searchInput) {
        const itemsArray = Object.values(this.items); // 将对象转换为数组
        return itemsArray.filter(item =>
          item.title.toLowerCase().includes(this.searchInput.toLowerCase())
        );
      } else {
        return Object.values(this.items); // 如果没有输入内容，返回所有的对象数组
      }
    },
  },
};
</script>