vue列表过滤实验内容

假设我们有一个包含以下数据的列表：

[
  { id: 1, name: 'John Doe', age: 25, city: 'New York' },
  { id: 2, name: 'Jane Smith', age: 30, city: 'Los Angeles' },
  { id: 3, name: 'Bob Johnson', age: 35, city: 'Chicago' },
  { id: 4, name: 'Sarah Lee', age: 28, city: 'San Francisco' },
  { id: 5, name: 'Tom Brown', age: 32, city: 'Boston' },
]

我们想要实现一个搜索功能，可以通过输入关键字来过滤列表。我们可以用Vue的计算属性来实现这个功能。

首先，在data中定义一个名为`searchText`的变量，用于保存用户输入的关键字。然后，在template中添加一个输入框和一个列表，用于展示过滤后的结果。

<template>
  <div>
    <input type="text" v-model="searchText">
    <ul>
      <li v-for="item in filteredList" :key="item.id">{{ item.name }} ({{ item.age }})</li>
    </ul>
  </div>
</template>

接下来，我们需要编写一个计算属性来实现列表的过滤。我们将其命名为`filteredList`。在计算属性中，我们使用`filter`方法来过滤列表。对于每个列表项，我们检查其`name`或`city`属性是否包含用户输入的关键字。如果是，则将其添加到一个新的数组中，并返回该数组作为过滤后的列表。

computed: {
  filteredList() {
    return this.list.filter(item => {
      return item.name.toLowerCase().includes(this.searchText.toLowerCase()) || item.city.toLowerCase().includes(this.searchText.toLowerCase());
    });
  }
}

完整代码如下：

<template>
  <div>
    <input type="text" v-model="searchText">
    <ul>
      <li v-for="item in filteredList" :key="item.id">{{ item.name }} ({{ item.age }})</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      list: [
        { id: 1, name: 'John Doe', age: 25, city: 'New York' },
        { id: 2, name: 'Jane Smith', age: 30, city: 'Los Angeles' },
        { id: 3, name: 'Bob Johnson', age: 35, city: 'Chicago' },
        { id: 4, name: 'Sarah Lee', age: 28, city: 'San Francisco' },
        { id: 5, name: 'Tom Brown', age: 32, city: 'Boston' },
      ]
    };
  },
  computed: {
    filteredList() {
      return this.list.filter(item => {
        return item.name.toLowerCase().includes(this.searchText.toLowerCase()) || item.city.toLowerCase().includes(this.searchText.toLowerCase());
      });
    }
  }
}
</script>