vue搜索框实现每个关键字高亮功能搜索结果是一个数组
时间: 2024-02-24 15:53:57 浏览: 36
对于Vue搜索框实现每个关键字高亮功能,可以使用正则表达式匹配关键字并替换成带有高亮样式的关键字。具体实现可以参考以下代码:
```
<template>
<div>
<input v-model="keyword" @input="search" placeholder="请输入关键字">
<ul>
<li v-for="result in searchResults" v-html="result"></li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
keyword: '',
searchResults: []
}
},
methods: {
search() {
const reg = new RegExp(this.keyword, 'gi')
this.searchResults = this.results.map(result => result.replace(reg, `<span class="highlight">${this.keyword}</span>`))
}
},
computed: {
results() {
// 根据关键字进行搜索并返回结果数组
}
}
}
</script>
<style>
.highlight {
color: red;
}
</style>
```
在上述代码中,我们定义了一个`keyword`变量来存储用户输入的关键字,一个`searchResults`数组用来存储搜索结果。在搜索框输入关键字时,我们使用正则表达式匹配结果,并使用`v-html`指令将搜索结果渲染到页面上。同时,我们还定义了一个`highlight`类来添加高亮样式。
需要注意的是,在搜索结果数组中,每个元素都需要使用`v-html`指令来渲染,这是为了让带有HTML标签的字符串能够正确解析并显示。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)