溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“Vue支持搜索與篩選的用戶列表如何實(shí)現(xiàn)”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue支持搜索與篩選的用戶列表如何實(shí)現(xiàn)”吧！
首先新建一個(gè)名為 normal.html 的測(cè)試文件，在HTML文件的head標(biāo)簽中引入Vue框架并設(shè)置常規(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>為了方便邏輯的演示，我們先不添加樣式，先從邏輯上梳理這樣一個(gè)簡(jiǎn)單頁面應(yīng)用的開發(fā)思路。
第一步，設(shè)計(jì)頁面的根組件的數(shù)據(jù)框架，分析頁面的功能需求，主要有三個(gè)：能夠渲染用戶列表、能夠根據(jù)輸入的關(guān)鍵字進(jìn)行檢索。因此，我們至少需要三個(gè)響應(yīng)式的數(shù)據(jù)：用戶列表數(shù)據(jù)、性別篩選字段和關(guān)鍵詞字段。
定義 組件的data選項(xiàng)如下：
data() {
return {
//性別篩選字段
sexFilter : -1,
//展示的用戶列表數(shù)據(jù)
showDatas : [],
//搜索的關(guān)鍵詞
sarchKey : ""
}
}上面定義的屬性中，sexFilter 字段的取值可以是 -1、0或1 。 -1表示全部，0表示性別男，1表示性別女。
第二步，思考頁面需要支持的行為，首先從網(wǎng)絡(luò)上請(qǐng)求用戶數(shù)據(jù)，將其渲染到頁面上（使用延時(shí)函數(shù)來模擬這一過程），要支持性別篩選功能，需要定義一個(gè)篩選函數(shù)來完成，同樣要實(shí)現(xiàn)關(guān)鍵詞檢索功能，也需要定義一個(gè)檢索函數(shù)。
定義組件的methods選項(xiàng)如下：
methods: {
//獲取用戶數(shù)據(jù)
queryAllData() {
this.showDatas = mock
},
//進(jìn)行性別篩選
filterData() {
if(this.sexFilter == -1) {
this.showDatas = mock
}else {
this.showDatas = mock.filter((data) => {
return data.sex == this.sexFilter
})
}
},
//進(jìn)行關(guān)鍵詞檢索
searchData() {
if(this.searchKey.length == 0) {
this.showDatas = mock
}else {
this.showDatas = mock.filter((data) => {
//名稱中包含輸入的關(guān)鍵詞則表示匹配成功
return data.name.indexOf(this.searchKey) != -1
})
}
}
}對(duì)上面的代碼進(jìn)行匯總，mock變量是本地定義的模擬數(shù)據(jù)，方便我們測(cè)試效果，代碼如下：
let mock = [
{
name : "小王",
sex : 0
},
{
name : "小紅",
sex : 1
},
{
name : "小李",
sex : 1
},
{
name : "小張",
sex : 0
}
]定義好了功能函數(shù)，我們需要在合適的時(shí)機(jī)對(duì)其進(jìn)行調(diào)用，queryAllData 方法可以在組件掛載時(shí)調(diào)用來獲取數(shù)據(jù)，當(dāng)頁面掛載后，延時(shí)3秒會(huì)獲取到測(cè)試的模擬數(shù)據(jù)，代碼如下：
mounted() {
//模擬請(qǐng)求過程
setTimeout(() => {
this.queryAllData
}, 3000);
},對(duì)于性別篩選和關(guān)鍵詞檢索功能，可以監(jiān)聽對(duì)應(yīng)的屬性，當(dāng)這些屬性發(fā)生變化時(shí)，進(jìn)行篩選或檢索行為。定義組件的watch選項(xiàng)如下：
watch: {
sexFilter(oldValue,newValue) {
this.filterData()
},
searchKey(oldValue,newValue) {
this.searchData()
}
}至此，我們編寫完成當(dāng)前頁面應(yīng)用的所有邏輯代碼。還有第三步需要做，將頁面渲染所需的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>運(yùn)行代碼，可以看到一個(gè)支持篩選和檢索的用戶列表應(yīng)用以及完成了，效果如下圖所示：
Vue3提供的組合式API的開發(fā)風(fēng)格可以很好的解決這個(gè)問題，我們可以將邏輯都梳理在setup方法中，相同的邏輯點(diǎn)聚合性更強(qiáng)，更易閱讀和擴(kuò)展。
使用組合式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 = () => {
// 模擬請(qǐng)求過程
setTimeout(()=>{
showDatas.value = mock
}, 3000);
}
// 組件掛載是請(qǐng)求數(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í)，特別要注意，對(duì)于需要使用的響應(yīng)式數(shù)據(jù)，要使用 ref 方法或 reactive方法進(jìn)行包裝。
在上一節(jié)中我們通過組合式API重寫了用戶列表頁面，但是現(xiàn)在頁面篩選和搜索功能都比較生硬，在本節(jié)，我們嘗試給他添加一些動(dòng)畫效果。
首先要實(shí)現(xiàn)列表動(dòng)畫效果，需要對(duì)定義的組件模板結(jié)果做一下改動(dòng)，示例代碼如下：
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>
`對(duì)應(yīng)的，定義CSS樣式與動(dòng)畫樣式如下：
.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)在運(yùn)行代碼，可以看到當(dāng)對(duì)用戶列表進(jìn)行篩選、搜索時(shí)，列表的變化以及有了動(dòng)畫過渡效果：
感謝各位的閱讀，以上就是“Vue支持搜索與篩選的用戶列表如何實(shí)現(xiàn)”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)Vue支持搜索與篩選的用戶列表如何實(shí)現(xiàn)這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼