Vue.js 列表过滤实现详解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>英雄列表过滤</title>
<!-- 引入Vue.js库 -->
<script src="../js/vue.js"></script>
</head>
<body>
<!-- Vue应用挂载点 -->
<div id="app">
<!-- 搜索输入框，使用v-model双向绑定keyword -->
<input type="text" placeholder="请输入搜索内容" v-model="keyword">
<!-- 英雄列表表格 -->
<table border="1px">
<tr>
<th>序号</th>
<th>名字</th>
</tr>
<!-- 使用v-for循环渲染过滤后的英雄列表 -->
<tr v-for="hero in newArr" :key="hero.id">
<td>{{hero.id}}</td>
<td>{{hero.name}}</td>
</tr>
</table>
</div>
<script>
// 创建Vue实例
new Vue({
el: "#app", // 指定挂载元素
// 数据对象
data: {
keyword: '', // 搜索关键词
heros: [ // 英雄原始数据
{ id: 1, name: '亚索' },
{ id: 2, name: '盖伦' },
{ id: 3, name: '艾希伦' },
{ id: 4, name: '提莫' },
{ id: 5, name: '李提青' }
],
newArr: [] // 存储过滤后的英雄数组
},
// 监视器
watch: {
// 监视keyword的变化
keyword: {
immediate: true, // 初始化时立即执行handler
handler(val) { // 处理函数，val是keyword的新值
// 过滤英雄数组
this.newArr = this.heros.filter((hero) => {
// 检查英雄名字是否包含搜索关键词
// 返回true表示保留该英雄，false表示过滤掉
return hero.name.indexOf(val) >= 0;
});
}
}
}
})
</script>
</body>
</html>
Vue.js 列表过滤实现文档
1. 功能概述
该代码实现了一个基于Vue.js的英雄列表过滤功能：
- 用户可以在输入框中输入搜索关键词
- 表格会实时显示名字包含搜索关键词的英雄
- 支持中文搜索（不区分大小写）
- 初始加载时显示所有英雄
2. 核心代码解析
2.1 数据模型
data: {
keyword: '', // 存储搜索关键词
heros: [ // 原始英雄数据
{ id: 1, name: '亚索' },
{ id: 2, name: '盖伦' },
// ...其他英雄
],
newArr: [] // 存储过滤后的结果
}
2.2 监听器实现
watch: {
keyword: {
immediate: true, // 初始化时立即执行handler
handler(val) { // 当keyword变化时执行
this.newArr = this.heros.filter((hero) => {
// 使用indexOf检查英雄名字是否包含关键词
return hero.name.indexOf(val) >= 0;
});
}
}
}
2.3 模板渲染
<!-- 输入框双向绑定keyword -->
<input type="text" v-model="keyword">
<!-- 渲染过滤后的列表 -->
<tr v-for="hero in newArr" :key="hero.id">
<td>{{hero.id}}</td>
<td>{{hero.name}}</td>
</tr>
3. 功能特点
- 实时响应：使用
v-model实现输入框与数据的双向绑定 - 即时过滤：通过
watch监听关键词变化，实时更新列表 - 初始加载：
immediate: true确保页面加载时显示完整列表 - 性能优化：使用数组的
filter方法高效过滤数据 - 键值绑定：
v-for配合:key="hero.id"提高渲染效率
4. 工作原理流程图
5. 使用说明
- 在输入框中输入任意字符（如"提"）
- 表格将实时显示包含该字符的英雄（如"提莫"和"李提青"）
- 清空输入框将显示所有英雄
- 支持部分匹配（如输入"伦"会显示"盖伦"和"艾希伦"）
6. 优化建议
添加空状态提示：
<tr v-if="newArr.length === 0"> <td colspan="2">未找到匹配的英雄</td> </tr>不区分大小写搜索：
return hero.name.toLowerCase().indexOf(val.toLowerCase()) >= 0;防抖处理（避免频繁触发）：
handler: _.debounce(function(val) { // 过滤逻辑 }, 300)使用计算属性替代watch：
computed: { filteredHeros() { return this.heros.filter(hero => hero.name.indexOf(this.keyword) >= 0 ); } }
7. 实际效果演示
| 搜索关键词 | 显示结果 |
|---|---|
| (空) | 所有英雄 |
| “伦” | 盖伦、艾希伦 |
| “提” | 提莫、李提青 |
| “亚” | 亚索 |
| “不存在” | 空列表 |
8. 总结
该实现展示了Vue.js的核心功能：
- 数据绑定（
v-model） - 响应式系统（
watch） - 列表渲染（
v-for） - 数组处理（
filter）
9.使用计算属性来实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" placeholder="请输入搜索内容" v-model="keyword">
<table border="1px">
<tr>
<th>序号</th>
<th>名字</th>
</tr>
<tr v-for="hero in newArr" :key="hero.id">
<td>{{hero.id}}</td>
<td>{{hero.name}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el: "#app",
data: {
keyword: '',
heros: [ // 英雄数据
{ id: 1, name: '亚索' },
{ id: 2, name: '盖伦' },
{ id: 3, name: '艾希伦' },
{ id: 4, name: '提莫' },
{ id: 5, name: '李提青' }
]
},
computed: {
newArr() {
return this.heros.filter((hero) => {
return hero.name.indexOf(this.keyword) >= 0
})
}
}
})
</script>
</body>
</html>
通过简洁的代码实现了高效的列表过滤功能，是Vue.js响应式编程的典型应用场景。