一、基本概念
1、Vue.js是一套用於構建用戶界面的漸進式框架。
2、模糊查詢指的是根據模糊的關鍵字進行查詢，而不是精確匹配。
3、搜索則是指在給定的數據集中查找符合要求的數據。
二、使用場景
1、搜索引擎
2、電商網站查詢商品
3、音樂網站查詢歌曲
4、社交網站查詢用戶
三、實現方法
1、使用computed屬性
computed: {
filteredList() {
return this.list.filter(item => {
return item.name.toLowerCase().includes(this.searchTerm.toLowerCase());
});
}
}
首先，定義一個computed屬性，名為filteredList。它會返回一個根據搜索關鍵字篩選過的列表。其中，我們使用JavaScript的filter()方法來篩選需要的數據。
我們需要根據name屬性來進行搜索，所以我們需要訪問每個item的name屬性。使用toLowerCase()方法可以將字母轉換成小寫，這樣我們就可以不區分大小寫地進行比較。
includes()方法用來判斷一個字符串是否包含另一個字符串。如果字符串中包含了搜索關鍵字，就會返回true，否則返回false。
2、使用watch監聽器
watch: {
searchTerm(newVal) {
this.filteredList = this.list.filter(item => {
return item.name.toLowerCase().includes(newVal.toLowerCase());
});
}
}
這種方法比較直觀，我們定義一個watch屬性，用來監聽searchTerm關鍵字的變化。每當搜索關鍵字發生變化時，就會執行這個watch屬性中的函數。
在函數中，我們根據searchTerm篩選需要的數據，然後將這些數據賦值給filteredList屬性。這樣，我們就實現了一個基於watch的模糊搜索功能。
3、使用v-for和v-if指令
{{ item.name }}
原創文章，作者：FQPLB，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/361238.html
微信掃一掃 
支付寶掃一掃 