vue实现搜索文章标题
实现搜索文章标题功能
在Vue中实现搜索文章标题功能，可以通过以下方式完成：
数据准备 假设有一个文章列表数据，存储在一个数组中：
data() {
return {
articles: [
{ id: 1, title: 'Vue入门教程' },
{ id: 2, title: 'React高级技巧' },
{ id: 3, title: 'JavaScript设计模式' }
],
searchQuery: ''
}
}模板部分 创建输入框和搜索结果展示区域：
<template>
<div>
<input v-model="searchQuery" placeholder="搜索文章标题">
<ul>
<li v-for="article in filteredArticles" :key="article.id">
{{ article.title }}
</li>
</ul>
</div>
</template>计算属性实现搜索 使用计算属性实现实时搜索功能：
computed: {
filteredArticles() {
const query = this.searchQuery.toLowerCase()
return this.articles.filter(article =>
article.title.toLowerCase().includes(query)
)
}
}优化搜索功能
添加防抖处理 防止频繁触发搜索，优化性能：
data() {
return {
debounceTimeout: null
}
},
methods: {
debounceSearch() {
clearTimeout(this.debounceTimeout)
this.debounceTimeout = setTimeout(() => {
this.filteredArticles = this.performSearch()
}, 300)
},
performSearch() {
const query = this.searchQuery.toLowerCase()
return this.articles.filter(article =>
article.title.toLowerCase().includes(query)
)
}
}高亮匹配文本 在搜索结果中高亮显示匹配的文本：
methods: {
highlight(text) {
const query = this.searchQuery
if (!query) return text
const regex = new RegExp(query, 'gi')
return text.replace(regex, match => `<span class="highlight">${match}</span>`)
}
}在模板中使用v-html绑定高亮文本：
<li v-for="article in filteredArticles" :key="article.id">
<span v-html="highlight(article.title)"></span>
</li>服务器端搜索实现
对于大量数据，建议使用服务器端搜索：
API调用示例
methods: {
async searchArticles() {
try {
const response = await axios.get('/api/articles', {
params: {
search: this.searchQuery
}
})
this.filteredArticles = response.data
} catch (error) {
console.error('搜索失败:', error)
}
}
}监听搜索词变化
watch: {
searchQuery(newVal) {
if (newVal.length > 2 || newVal.length === 0) {
this.debounceSearch()
}
}
}用户体验优化
添加加载状态
data() {
return {
isLoading: false
}
},
methods: {
async searchArticles() {
this.isLoading = true
try {
// API调用
} finally {
this.isLoading = false
}
}
}模板中添加加载指示器
<div v-if="isLoading">搜索中...</div>
<div v-else-if="filteredArticles.length === 0 && searchQuery">
没有找到匹配的文章
</div>这些方法可以根据实际项目需求进行组合和调整，实现适合的搜索功能。
