vue实现input框搜索功能

要实现vue中的input框搜索功能，可以按照以下步骤操作：

1. 在template中添加一个input标签，用来输入搜索关键词。

2. 使用v-model指令将input标签的value值与组件data里存储搜索关键词的变量绑定起来。

3. 在组件内的data中定义一个变量，用来存储搜索关键词。

4. 在methods中编写一个函数，用来处理搜索操作，遍历数据，找到符合关键词的数据，把它们存储在需要展示结果的变量中。

5. 使用v-for指令遍历展示结果的数组，显示搜索出来的数据。

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

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

<script>
export default {
  data() {
    return {
      searchKeyword: "",
      dataList: [
        {id: 1, title: "VueJS教程"},
        {id: 2, title: "ReactJS教程"},
        {id: 3, title: "AngularJS教程"},
      ],
      searchResult: []
    };
  },

  methods: {
    search() {
      this.searchResult = [];
      for (let item of this.dataList) {
        if (item.title.indexOf(this.searchKeyword) !== -1) {
          this.searchResult.push(item);
        }
      }
    }
  },

  watch: {
    searchKeyword() {
      this.search();
    }
  }
}
</script>