vue的input框的关键词搜索

要实现vue的input框的关键词搜索，可以使用Vue的计算属性和v-for指令来实现。

首先，在组件中定义一个data属性，用于存储关键词列表和用户输入的关键词：

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

<script>
  export default {
    data() {
      return {
        keyword: '',
        keywordList: ['Vue', 'React', 'Angular', 'Webpack', 'Babel', 'Node.js', 'TypeScript', 'JavaScript']
      }
    },
    computed: {
      filteredList() {
        // 使用Vue的计算属性来实现关键词搜索
        return this.keywordList.filter(keyword => keyword.toLowerCase().indexOf(this.keyword.toLowerCase()) !== -1);
      }
    }
  }
</script>

在上述代码中，我们使用了Vue的计算属性来实现关键词搜索，计算属性的名称为filteredList，它是根据用户输入的关键词来过滤关键词列表得到的结果。在模板中，我们使用v-for指令来遍历filteredList，将过滤后的关键词列表以列表的形式呈现在页面上。

需要注意的是，在计算属性中，我们使用了Array的filter方法来过滤关键词列表，根据用户输入的关键词来返回匹配的关键词列表。同时，为了避免大小写敏感，我们将关键词和用户输入的关键词都转换为小写字母再进行比较。

这样，当用户在输入框中输入关键词时，会实时根据关键词列表过滤出匹配的关键词，并将匹配的关键词以列表的形式呈现在页面上。