名字筛选用vue实现
实现名字筛选的Vue组件
创建一个Vue组件实现名字筛选功能，可以通过输入框输入关键词实时筛选匹配的名字列表。
模板部分
<template>
<div class="name-filter">
<input
v-model="searchTerm"
placeholder="输入名字关键词"
class="filter-input"
/>
<ul class="name-list">
<li v-for="name in filteredNames" :key="name">
{{ name }}
</li>
</ul>
</div>
</template>脚本部分
<script>
export default {
data() {
return {
searchTerm: '',
names: [
'张三',
'李四',
'王五',
'赵六',
'钱七',
'孙八'
]
}
},
computed: {
filteredNames() {
return this.names.filter(name =>
name.toLowerCase().includes(this.searchTerm.toLowerCase())
)
}
}
}
</script>样式部分
<style scoped>
.name-filter {
max-width: 300px;
margin: 20px auto;
}
.filter-input {
width: 100%;
padding: 8px;
margin-bottom: 10px;
}
.name-list {
list-style: none;
padding: 0;
}
.name-list li {
padding: 8px;
border-bottom: 1px solid #eee;
}
</style>优化筛选功能
增加更复杂的筛选逻辑，如支持拼音首字母匹配：
computed: {
filteredNames() {
const term = this.searchTerm.toLowerCase()
return this.names.filter(name => {
const lowerName = name.toLowerCase()
return lowerName.includes(term) ||
this.getPinyinInitials(name).includes(term)
})
}
},
methods: {
getPinyinInitials(name) {
// 简单实现拼音首字母匹配
const pinyinMap = {
'张': 'z', '三': 's',
'李': 'l', '四': 's',
'王': 'w', '五': 'w',
'赵': 'z', '六': 'l',
'钱': 'q', '七': 'q',
'孙': 's', '八': 'b'
}
return name.split('').map(char => pinyinMap[char] || '').join('')
}
}使用第三方拼音库
为获得更准确的拼音匹配，可以引入pinyin-pro等专业库：
import pinyin from 'pinyin-pro'
methods: {
getPinyinInitials(name) {
return pinyin(name, { pattern: 'first', toneType: 'none' })
}
}添加防抖优化
为防止频繁触发筛选，可以添加防抖功能：
import { debounce } from 'lodash'
computed: {
filteredNames: debounce(function() {
const term = this.searchTerm.toLowerCase()
return this.names.filter(name =>
name.toLowerCase().includes(term)
)
}, 300)
}支持异步数据加载
当名字列表需要从API获取时：
data() {
return {
searchTerm: '',
names: [],
isLoading: false
}
},
async created() {
this.isLoading = true
this.names = await fetchNamesFromApi()
this.isLoading = false
}
