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響應式編程的典型應用場景。
