vue如何实现搜索功能

Vue可以通过以下步骤实现搜索功能：

1. 创建一个包含所有需要搜索的数据的列表。
2. 创建一个input元素，用于接收用户输入的关键字。
3. 监听input元素的输入事件，每当用户输入一个字符，就触发一个搜索方法。
4. 在搜索方法中，使用JavaScript的filter()方法筛选出符合条件的数据，并将结果保存在一个新的数组中。
5. 在页面上展示筛选后的结果。

下面是一个基本的Vue搜索功能的示例代码：

<template>
  <div>
    <input type="text" v-model="keyword" @input="search">
    <ul>
      <li v-for="item in filteredList">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['apple', 'banana', 'orange', 'peach'],
      keyword: '',
    }
  },
  computed: {
    filteredList() {
      return this.list.filter(item => item.includes(this.keyword))
    }
  },
  methods: {
    search() {
      // do nothing, computed property will filter data automatically
    }
  }
}
</script>

在这个示例中，我们创建了一个包含水果的列表，用户可以在搜索框中输入关键字，然后筛选出包含该关键字的水果。computed属性`filteredList`使用JavaScript的filter()方法来实现筛选功能，方法中使用了this.keyword来获取搜索框中的关键字。

当用户输入关键字时，input元素的@input事件会触发search()方法，该方法什么都不做，只是为了触发computed property重新计算。由于filteredList是一个computed property，它会自动监听data中的list和keyword变化，并在数据改变时重新计算。这样，每当用户输入一个字符时，computed property就会重新计算，筛选出符合条件的数据并展示在页面上。