vue2写搜索页面，让搜索的内容和下方展示的内容一致

如果你想让搜索的内容和下方展示的内容一致，可以采取以下步骤：

1. 在 data 中定义一个数组，用于存储展示的所有内容，例如：

data() {
  return {
    items: [
      { id: 1, name: 'item 1' },
      { id: 2, name: 'item 2' },
      { id: 3, name: 'item 3' },
      { id: 4, name: 'item 4' },
      { id: 5, name: 'item 5' },
    ],
    searchQuery: '',
    searchResults: [],
  }
},

2. 在页面上展示所有内容，例如：

<template>
  <div>
    <input type="text" v-model="searchQuery" @input="searchItems">
    <ul>
      <li v-for="item in items">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'item 1' },
        { id: 2, name: 'item 2' },
        { id: 3, name: 'item 3' },
        { id: 4, name: 'item 4' },
        { id: 5, name: 'item 5' },
      ],
      searchQuery: '',
      searchResults: [],
    }
  },
  methods: {
    searchItems() {
      this.searchResults = this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    },
  },
}
</script>

3. 增加搜索功能，将搜索结果展示在页面上，例如：

<template>
  <div>
    <input type="text" v-model="searchQuery" @input="searchItems">
    <ul>
      <li v-for="result in searchResults">{{ result.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'item 1' },
        { id: 2, name: 'item 2' },
        { id: 3, name: 'item 3' },
        { id: 4, name: 'item 4' },
        { id: 5, name: 'item 5' },
      ],
      searchQuery: '',
      searchResults: [],
    }
  },
  methods: {
    searchItems() {
      this.searchResults = this.items.filter(item =>
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    },
  },
}
</script>

这样就实现了搜索功能，并且搜索的内容和下方展示的内容一致。