Vue.js 列表过滤实现详解（watch和computed实现）
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, // 初始化时立即执行handlerhandler(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, // 初始化时立即执行handlerhandler(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响应式编程的典型应用场景。