当前位置：首页 > news >正文

Vue.js 列表过滤实现详解（watch和computed实现）

news 来源：原创 2025/6/25 9:18:15

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>