vue模糊搜索高亮显示
时间: 2024-06-19 09:01:39 浏览: 217
Vue.js 中实现模糊搜索并高亮显示通常涉及以下几个步骤:
1. **模板(HTML)**:首先在模板中创建输入框和可搜索的数据列表,如一个`<input>`用于用户输入,一个`<ul>`或`<v-for>`循环展示列表项。
```html
<input v-model="searchText" placeholder="Search...">
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ highlightText(item.name, searchText) }}
</li>
</ul>
```
2. **数据绑定和计算属性**:定义一个`searchText`变量来存储用户的输入,以及`filteredItems`计算属性,根据`searchText`过滤数据。
```javascript
data() {
return {
searchText: '',
items: [...], // 初始化的数据源
};
},
computed: {
filteredItems() {
return this.items.filter(item => item.name.includes(this.searchText));
}
}
```
3. **高亮显示函数**:这是一个辅助函数,使用正则表达式或字符串方法找出需要高亮的部分,并替换原字符串。
```javascript
methods: {
highlightText(text, searchQuery) {
const regex = new RegExp(searchQuery, 'gi');
return text.replace(regex, `<span class="highlight">${searchQuery}</span>`);
}
},
```
4. **CSS样式**:为高亮部分添加一个样式类,比如`.highlight`,以改变其颜色或格式。
```css
.highlight {
background-color: yellow; /* 或者自定义其他样式 */
font-weight: bold;
}
```
阅读全文