vue3实现搜索列表并且使输入的关键词匹配列表中的字使其列表中的字同时变色
时间: 2023-05-29 08:05:06 浏览: 353
首先,需要在Vue组件中定义一个data属性,用于存储搜索关键词和搜索结果列表:
```
data() {
return {
keyword: '',
searchResult: []
}
}
```
然后,需要在模板中添加一个文本框和一个搜索按钮,并且绑定keyword属性:
```
<input type="text" v-model="keyword">
<button @click="search">搜索</button>
```
接着,需要定义一个搜索方法,用于根据关键词查询结果列表,并且将匹配的字体标记为红色:
```
methods: {
search() {
// 根据关键词查询结果列表
this.searchResult = this.list.filter(item => item.includes(this.keyword))
// 将匹配的字体标记为红色
this.searchResult = this.searchResult.map(item => {
const regExp = new RegExp(this.keyword, 'g')
return item.replace(regExp, '<span style="color:red;">$&</span>')
})
}
}
```
最后,在模板中添加一个列表,用于展示搜索结果:
```
<ul>
<li v-for="result in searchResult" v-html="result"></li>
</ul>
```
完整的代码示例:
```
<template>
<div>
<input type="text" v-model="keyword">
<button @click="search">搜索</button>
<ul>
<li v-for="result in searchResult" v-html="result"></li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
keyword: '',
searchResult: [],
list: [
'Vue.js',
'React.js',
'Angular.js',
'jQuery',
'Bootstrap',
'CSS',
'HTML',
'JavaScript'
]
}
},
methods: {
search() {
// 根据关键词查询结果列表
this.searchResult = this.list.filter(item => item.includes(this.keyword))
// 将匹配的字体标记为红色
this.searchResult = this.searchResult.map(item => {
const regExp = new RegExp(this.keyword, 'g')
return item.replace(regExp, '<span style="color:red;">$&</span>')
})
}
}
}
</script>
```