vue实现输入框搜索功能

首先，在Vue模板中，需要添加一个输入框和一个按钮：

<template>
  <div>
    <input type="text" v-model="searchText">
    <button @click="search">搜索</button>
  </div>
</template>

其中，`searchText`是用来存储用户输入的搜索关键词的变量。

接下来，在Vue组件中，需要定义`searchText`变量和`search`方法：

<script>
export default {
  data() {
    return {
      searchText: ''
    }
  },
  methods: {
    search() {
      // 执行搜索操作
      console.log('搜索关键词：', this.searchText)
    }
  }
}
</script>

在`search`方法中，我们可以获取用户输入的搜索关键词，然后执行搜索操作。

如果我们要实现实时搜索功能，可以使用`watch`来监听`searchText`变量的变化：

<script>
export default {
  data() {
    return {
      searchText: ''
    }
  },
  watch: {
    searchText: function(newValue) {
      // 执行搜索操作
      console.log('搜索关键词：', newValue)
    }
  }
}
</script>

以上就是Vue实现输入框搜索功能的基本步骤。当用户输入搜索关键词后，可以通过调用后端API来获取搜索结果，并在页面上展示出来。