vue中如何实现搜索框

在Vue中实现搜索框可以使用v-model指令来绑定搜索框的值，然后使用computed属性来过滤数据。具体实现步骤如下：

1. 在data中定义一个searchText变量，用来存储搜索框的值。

2. 在搜索框中使用v-model指令将searchText与输入框绑定起来。

3. 在computed属性中定义一个filteredData函数，用来过滤数据。该函数可以使用JavaScript的filter方法来实现。

4. 在模板中使用v-for指令循环渲染过滤后的数据。

下面是一个简单的示例代码：

<template>
  <div>
    <input type="text" v-model="searchText" placeholder="请输入搜索关键字">
    <ul>
      <li v-for="item in filteredData">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      data: ['apple', 'banana', 'orange', 'pear']
    }
  },
  computed: {
    filteredData() {
      return this.data.filter(item => item.includes(this.searchText))
    }
  }
}
</script>

在上面的代码中，我们定义了一个data数组，其中包含了一些水果名称。在computed属性中，我们定义了一个filteredData函数，该函数使用filter方法来过滤data数组中包含searchText的元素。在模板中，我们使用v-for指令循环渲染过滤后的数据。

希望这个示例能够帮助你实现Vue中的搜索框功能。