Vue支持搜索與篩選的用戶列表實現(xiàn)流程介紹
1. 常規(guī)風格的示例工程開發(fā)
首先新建一個名為 normal.html 的測試文件，在HTML文件的head標簽中引入Vue框架并設置常規(guī)的模板字段如下：
<!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="https://unpkg.com/vue@next"></script>
<style>
.container {
margin: 50px;
}
.content {
margin: 20px;
}
</style>
</head>
<body>
<div id="Application"></div>
<script>
const App = Vue.createApp({
})
App.mount('#Application')
</script>
</body>
</html>為了方便邏輯的演示，我們先不添加樣式，先從邏輯上梳理這樣一個簡單頁面應用的開發(fā)思路。
第一步，設計頁面的根組件的數(shù)據(jù)框架，分析頁面的功能需求，主要有三個：能夠渲染用戶列表、能夠根據(jù)輸入的關鍵字進行檢索。因此，我們至少需要三個響應式的數(shù)據(jù)：用戶列表數(shù)據(jù)、性別篩選字段和關鍵詞字段。
定義 組件的data選項如下：
data() {
return {
//性別篩選字段
sexFilter : -1,
//展示的用戶列表數(shù)據(jù)
showDatas : [],
//搜索的關鍵詞
sarchKey : ""
}
}上面定義的屬性中，sexFilter 字段的取值可以是 -1、0或1 。 -1表示全部，0表示性別男，1表示性別女。
第二步，思考頁面需要支持的行為，首先從網(wǎng)絡上請求用戶數(shù)據(jù)，將其渲染到頁面上（使用延時函數(shù)來模擬這一過程），要支持性別篩選功能，需要定義一個篩選函數(shù)來完成，同樣要實現(xiàn)關鍵詞檢索功能，也需要定義一個檢索函數(shù)。
定義組件的methods選項如下：
methods: {
//獲取用戶數(shù)據(jù)
queryAllData() {
this.showDatas = mock
},
//進行性別篩選
filterData() {
if(this.sexFilter == -1) {
this.showDatas = mock
}else {
this.showDatas = mock.filter((data) => {
return data.sex == this.sexFilter
})
}
},
//進行關鍵詞檢索
searchData() {
if(this.searchKey.length == 0) {
this.showDatas = mock
}else {
this.showDatas = mock.filter((data) => {
//名稱中包含輸入的關鍵詞則表示匹配成功
return data.name.indexOf(this.searchKey) != -1
})
}
}
}對上面的代碼進行匯總，mock變量是本地定義的模擬數(shù)據(jù)，方便我們測試效果，代碼如下：
let mock = [
{
name : "小王",
sex : 0
},
{
name : "小紅",
sex : 1
},
{
name : "小李",
sex : 1
},
{
name : "小張",
sex : 0
}
]定義好了功能函數(shù)，我們需要在合適的時機對其進行調用，queryAllData 方法可以在組件掛載時調用來獲取數(shù)據(jù)，當頁面掛載后，延時3秒會獲取到測試的模擬數(shù)據(jù)，代碼如下：
mounted() {
//模擬請求過程
setTimeout(() => {
this.queryAllData
}, 3000);
},對于性別篩選和關鍵詞檢索功能，可以監(jiān)聽對應的屬性，當這些屬性發(fā)生變化時，進行篩選或檢索行為。定義組件的watch選項如下：
watch: {
sexFilter(oldValue,newValue) {
this.filterData()
},
searchKey(oldValue,newValue) {
this.searchData()
}
}至此，我們編寫完成當前頁面應用的所有邏輯代碼。還有第三步需要做，將頁面渲染所需的HTML框架搭建完成，示例代碼如下：
<div id="Application">
<div class="container">
<div class="content">
<input type="radio" :value="-1" v-model="sexFilter"/>全部
<input type="radio" :value="0" v-model="sexFilter"/>男
<input type="radio" :value="1" v-model="sexFilter"/>女
</div>
<div class="content">搜索：<input type="text" v-model="searchKey" /></div>
<div class="content">
<table border="1" width="300px">
<tr>
<th>姓名</th>
<th>性別</th>
</tr>
<tr v-for="(data, index) in showDatas">
<td>{{data.name}}</td>
<td>{{data.sex == 0 ? '男' : '女'}}</td>
</tr>
</table>
</div>
</div>
</div>運行代碼，可以看到一個支持篩選和檢索的用戶列表應用以及完成了，效果如下圖所示：
2. 使用組合式API重構用戶列表頁面
在上一節(jié)中我們實現(xiàn)了完整的用戶列表頁面。深入分析我們編寫的代碼，可以發(fā)現(xiàn)需要關注的邏輯點十分分散，例如用戶的性別篩選是一個獨立的功能，要實現(xiàn)這樣一個功能，需要先在data選項中定義屬性，之后在methods選項中定義功能方法，最后在watch選項中監(jiān)聽屬性，實現(xiàn)篩選功能。這些邏輯點的分離使得代碼的可讀性變差，并且隨著項目的迭代，頁面的功能可能會越來越復雜，對于后續(xù)此組建的維護者來說，擴展會變得更加困難。
Vue3提供的組合式API的開發(fā)風格可以很好的解決這個問題，我們可以將邏輯都梳理在setup方法中，相同的邏輯點聚合性更強，更易閱讀和擴展。
使用組合式API重寫后的完整代碼如下：
let mock = [
{
name:"小王",
sex:0
},{
name:"小紅",
sex:1
},{
name:"小李",
sex:1
},{
name:"小張",
sex:0
}
]
const App = Vue.createApp({
setup() {
// 用戶列表
const showDatas = Vue.ref([])
const queryAllData = () => {
// 模擬請求過程
setTimeout(()=>{
showDatas.value = mock
}, 3000);
}
// 組件掛載是請求數(shù)據(jù)
Vue.onMounted(queryAllData)
let sexFilter = Vue.ref(-1)
let searchKey = Vue.ref("")
let filterData = () => {
if (sexFilter.value == -1) {
showDatas.value = mock
} else {
showDatas.value = mock.filter((data)=>{
return data.sex == sexFilter.value
})
}
}
searchData = () => {
if (searchKey.value.length == 0) {
showDatas.value = mock
} else {
showDatas.value = mock.filter((data)=>{
return data.name.search(searchKey.value) != -1
})
}
}
// 添加偵聽
Vue.watch(sexFilter, filterData)
Vue.watch(searchKey, searchData)
return {
showDatas,
searchKey,
sexFilter
}
},
template: `
<div class="container">
<div class="content">
<input type="radio" :value="-1" v-model="sexFilter"/>全部
<input type="radio" :value="0" v-model="sexFilter"/>男
<input type="radio" :value="1" v-model="sexFilter"/>女
</div>
<div class="content">搜索：<input type="text" v-model="searchKey" /></div>
<div class="content">
<table border="1" width="300px">
<tr>
<th>姓名</th>
<th>性別</th>
</tr>
<tr v-for="(data, index) in showDatas">
<td>{{data.name}}</td>
<td>{{data.sex == 0 ? '男' : '女'}}</td>
</tr>
</table>
</div>
</div>
`
})
App.mount("#Application") 在使用組合式API編寫代碼時，特別要注意，對于需要使用的響應式數(shù)據(jù)，要使用 ref 方法或 reactive方法進行包裝。
3. 優(yōu)化用戶列表頁面
在上一節(jié)中我們通過組合式API重寫了用戶列表頁面，但是現(xiàn)在頁面篩選和搜索功能都比較生硬，在本節(jié)，我們嘗試給他添加一些動畫效果。
首先要實現(xiàn)列表動畫效果，需要對定義的組件模板結果做一下改動，示例代碼如下：
template: `
<div class="container">
<div class="content">
<input type="radio" :value="-1" v-model="sexFliter"/>全部
<input type="radio" :value="0" v-model="sexFliter"/>男
<input type="radio" :value="1" v-model="sexFliter"/>女
</div>
<div class="content">搜索：<input type="text" v-model="searchKey" /></div>
<div class="content">
<div class="tab" width="300px">
<div>
<div class="item">姓名</div>
<div class="item">性別</div>
</div>
<transition-group name="list">
<div v-for="(data, index) in showDatas" :key="data.name">
<div class="item">{{data.name}}</div>
<div class="item">{{data.sex == 0 ? '男' : '女'}}</div>
</div>
</transition-group>
</div>
</div>
</div>
`對應的，定義CSS樣式與動畫樣式如下：
.container {
margin: 50px;
}
.content {
margin: 20px;
}
.tab {
width: 300px;
position: absolute;
}
.item {
border: gray 1px solid;
width: 148px;
text-align: center;
transition: all 0.8s ease;
display: inline-block;
}
.list-enter-active {
transition: all 1s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
}
.list-move {
transition: transform 1s ease;
}
.list-leave-active {
position: absolute;
transition: all 1s ease;
}現(xiàn)在運行代碼，可以看到當對用戶列表進行篩選、搜索時，列表的變化以及有了動畫過渡效果：
到此這篇關于Vue支持搜索與篩選的用戶列表實現(xiàn)流程介紹的文章就介紹到這了,更多相關Vue用戶列表內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文主要介紹了vue中傳參params和data的區(qū)別，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
vue element動態(tài)渲染、移除表單并添加驗證的實現(xiàn)
這篇文章主要介紹了vue element動態(tài)渲染、移除表單并添加驗證的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要為大家詳細解析了vue分頁組件table-pagebar使用實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
解決Electron?store的commit和dispatch不好用問題
這篇文章主要介紹了解決Electron?store的commit和dispatch不好用問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue?button的@click方法無效鉤子函數(shù)沒有執(zhí)行問題
這篇文章主要介紹了vue?button的@click方法無效鉤子函數(shù)沒有執(zhí)行問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
vue3+element-plus動態(tài)路由菜單示例代碼
這篇文章主要介紹了vue3+element-plus動態(tài)路由菜單示例代碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
使用axios發(fā)送post請求,將JSON數(shù)據(jù)改為form類型的示例
今天小編就為大家分享一篇使用axios發(fā)送post請求,將JSON數(shù)據(jù)改為form類型的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要為大家詳細介紹了基于vue的fullpage.js單頁滾動插件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
vue.nextTick()與setTimeout的區(qū)別及說明
這篇文章主要介紹了vue.nextTick()與setTimeout的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue.js的核心是一個響應的數(shù)據(jù)綁定系統(tǒng)，它允許我們在普通 HTML 模板中使用特殊的語法將 DOM “綁定”到底層數(shù)據(jù)。被綁定的DOM 將與數(shù)據(jù)保持同步，每當數(shù)據(jù)有改動，相應的DOM視圖也會更新?；谶@種特性，通過vue.js動態(tài)綁定class就變得非常簡單。一起來看下吧2016-12-12