vue的input框的关键词搜索
时间: 2024-03-23 15:41:31 浏览: 37
要实现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方法来过滤关键词列表,根据用户输入的关键词来返回匹配的关键词列表。同时,为了避免大小写敏感,我们将关键词和用户输入的关键词都转换为小写字母再进行比较。
这样,当用户在输入框中输入关键词时,会实时根据关键词列表过滤出匹配的关键词,并将匹配的关键词以列表的形式呈现在页面上。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![png](https://img-home.csdnimg.cn/images/20210720083516.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)