vue中用什么实现搜索框

在Vue中实现搜索框可以使用多种方式，以下是其中一种：

1. 使用Vue自带的v-model指令绑定输入框的值，监听输入框的变化。

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

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

在上面的示例中，使用v-model指令绑定输入框的值到searchText变量上，并在computed属性中实现一个计算属性filteredList，根据searchText值过滤list数组中的元素，从而实现实时搜索。

2. 利用第三方插件实现搜索框，如element-ui和iview等UI组件库中都有现成的搜索框组件，只需要按照文档使用即可。

<template>
  <div>
    <el-input v-model="searchText" placeholder="请输入搜索内容"></el-input>
    <ul>
      <li v-for="item in filteredList">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import { Input } from 'element-ui'

export default {
  components: {
    'el-input': Input
  },
  data() {
    return {
      searchText: '',
      list: ['apple', 'banana', 'orange', 'pear']
    }
  },
  computed: {
    filteredList() {
      return this.list.filter(item => item.includes(this.searchText))
    }
  }
}
</script>

在上面的示例中，使用element-ui的el-input组件实现搜索框，同样使用v-model指令绑定输入框的值到searchText变量上，并在computed属性中实现一个计算属性filteredList，根据searchText值过滤list数组中的元素，从而实现实时搜索。