Vue的列表之渲染,排序,過(guò)濾詳解
1. 列表（渲染、排序、過(guò)濾）
1.1 條件渲染指令
有個(gè)小技巧：
? 如果是查找對(duì)象中不存在的屬性，返回的是一個(gè)undefined，利用這一個(gè)點(diǎn)不管是v-show或者是v-if，如果值等于undefined的就不顯示，假設(shè)sex屬性不存在
<p v-show="student.sex">性別：{{student.sex}}</p>
1.1.1 v-show
1.v-show的原理：通過(guò)display：none 對(duì)元素進(jìn)行隱藏，當(dāng)滿足條件時(shí)去除display：none這個(gè)樣式
2.適用的場(chǎng)景是：切換頻率較高的場(chǎng)景
3.在使用v-show隱藏元素的時(shí)候是可以獲取得到元素的，而v-if 是無(wú)法獲取到元素的
1.1.2 v-if
1.v-if的原理：將整個(gè)節(jié)點(diǎn)移除，滿足條件時(shí)添加節(jié)點(diǎn)
2.v-else、v-else-if 需要配合v-if去使用，但是結(jié)構(gòu)不能被破壞
必須要先寫(xiě)v-if，例如：
v-if = "xxx" v-else = "xxx" --------------------- v-if = "xxx" v-else-if = "xxx" v-else = "xxx"
適用的場(chǎng)景：切換頻率比較低的場(chǎng)景
template
最大的特點(diǎn)就是不破壞結(jié)構(gòu)但是只能與 v-if 進(jìn)行配合使用
1.1.3 v-if和v-show的小案例
<div id="root">
<h2>當(dāng)前n的值為：{{n}}</h2>
<button @click="n++">點(diǎn)擊我n加1</button>
<div class="box1" v-show = "true">你好啊！我是box1</div>
<div class="box1" v-show = "false">你好?。∥沂莃ox1</div>
<div class="box1" v-show="n === 1">你好??！box1</div>
<div class="box2" v-if = "true">我是box2</div>
<div class="box2" v-if = "false">我是box2</div>
<div class="box2" v-if="n === 2">我是box2</div>
<!--
3. v-else-if , v-else , v-if 的區(qū)別
- v-if必須先寫(xiě)，才能寫(xiě)v-else和v-else-if
- 例如：
v-if
v-if
v-if
這樣是進(jìn)行3次判斷
-------------------------------
v-if
v-else-if
v-else-if
v-else
只要有一個(gè)判斷為真，下面的語(yǔ)句就不執(zhí)行
----------------------------------
v-else
只要不滿足v-if的條件就執(zhí)行
-->
<div class="box3" v-if = "n===1">我是box31</div>
<div class="box3" v-else-if="n===1">我是box32</div>
<div class="box3" v-else-if = "n===3">我是box33</div>
<div class="box3" v-else>hhhhhhh</div>
//當(dāng)滿足條件的時(shí)候只輸出滿足條件的值，例如本例子輸出為 ‘我是box31'
<!--
需求：當(dāng)n == 2時(shí)，在頁(yè)面輸出5句話
4. template
- 最大的特點(diǎn)就是不破壞結(jié)構(gòu)
- 但是只能和 v-if進(jìn)行配合使用
-->
<template v-if="n === 2">
<h3>你好??！</h3>
<h3>猜猜我是誰(shuí)?</h3>
<h3>我是box4</h3>
<h3>你猜對(duì)了嗎?</h3>
<h3>你真棒！</h3>
</template>
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el: '#root',
data: {
n: 0,
}
})
</script>
1.1.4 v-for（key的原理）
特點(diǎn)：
1.可以遍歷數(shù)組
2.可以遍歷對(duì)象
3.可以遍歷字符串
4.可以遍歷次數(shù)（用的很少）
5.如果我們不寫(xiě)key，默認(rèn)使用index
作用：用于展示列表的數(shù)據(jù)
語(yǔ)法：v-for = "(item,index) in xxx" :key= "yyy"
key的原理：（很重要）
1.虛擬DOM中key的作用：
key是虛擬DOM對(duì)象的標(biāo)識(shí)，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，Vue會(huì)根據(jù)【新數(shù)據(jù)】生成【新的虛擬DOM】, 隨后Vue進(jìn)行【新虛擬DOM】與【舊虛擬DOM】的差異比較，比較規(guī)則如下：
(1). 舊虛擬DOM中找到了與新虛擬DOM相同的key：
①若虛擬DOM中內(nèi)容沒(méi)變, 直接使用之前的真實(shí)DOM
②若虛擬DOM中內(nèi)容變了, 則生成新的真實(shí)DOM，隨后替換掉頁(yè)面中之前的真實(shí)DOM
(2). 舊虛擬DOM中未找到與新虛擬DOM相同的key直接創(chuàng)建新的真實(shí)DOM，隨后渲染到到頁(yè)面。
2.如果使用index作為key會(huì)引發(fā)以下的問(wèn)題：
（1）如果發(fā)生逆序添加、逆序刪除破壞了順序操作就會(huì)產(chǎn)生沒(méi)有必要的DOM更新而會(huì)造成達(dá)不到效果的問(wèn)題
（2）如果輸入結(jié)構(gòu)包括了輸入類的DOM元素，會(huì)產(chǎn)生更新問(wèn)題比如：input的框的數(shù)據(jù)對(duì)不上等等
3.所以在開(kāi)發(fā)的過(guò)程中key的使用最好是使用唯一能夠標(biāo)識(shí)的值作為key，比如id，Date.now(),nanoid這個(gè)包npm i nanoid等等
1.2 列表過(guò)濾
使用computed
<div id="root">
<input type="text" placeholder="請(qǐng)輸入關(guān)鍵字" v-model="keyword">
<br>
<ul>
<li v-for="value in filtername" :key="value.id" >
{{value.name}} -- {{value.age}} -- {{value.gender}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el: '#root',
data: {
arr: [
{ id: "001", name: "馬冬梅", age: 18, gender: "female" },
{ id: "002", name: "周冬雨", age: 55, gender: "female" },
{ id: "003", name: "周杰倫", age: 30, gender: "male" },
{ id: "004", name: "郭艾倫", age: 30, gender: "male" },
{ id: "005", name: "郭德綱", age: 30, gender: "male" },
],
keyword:""
},
computed:{
filtername:{
get(){
return this.arr.filter((currentval)=>{
return currentval.name.indexOf(this.keyword) !== -1
})
}
}
}
})
</script>
使用watch
<div id="root">
<input type="text" placeholder="請(qǐng)輸入關(guān)鍵字" v-model="keyword">
<br>
<ul>
<li v-for="value in filearr" :key="value.id" >
{{value.name}} -- {{value.age}} -- {{value.gender}}
</li>
</ul>
</div>
<script>
/* 分享一個(gè)數(shù)組去重的方法
var arr = [1,35,612,6546,1,51]
var newarr = arr.filter((val,index)=>{
return arr.indexOf(val,0) === index
})
console.log(newarr);
filter(function(current,index,arr){return xxx})
- return : 寫(xiě)的是過(guò)濾的條件
- 返回的是滿足條件的元素
indexOf:
- 第一個(gè)參數(shù)是：要查詢的元素
- 第二個(gè)參數(shù)是：開(kāi)始索引的位置
- 它返回的值是當(dāng)前元素的索引值，如果沒(méi)有要查詢的元素返回的是-1
*/
Vue.config.productionTip = false
let vm = new Vue({
el: '#root',
data: {
arr: [
{ id: "001", name: "馬冬梅", age: 18, gender: "female" },
{ id: "002", name: "周冬雨", age: 55, gender: "female" },
{ id: "003", name: "周杰倫", age: 30, gender: "male" },
{ id: "004", name: "郭艾倫", age: 30, gender: "male" },
{ id: "005", name: "郭德綱", age: 30, gender: "male" },
],
keyword:'',
filearr:[]
},
/*
需求：當(dāng)輸入某一個(gè)關(guān)鍵字，輸出相關(guān)的內(nèi)容
思路：
1. 獲取到用戶輸入的數(shù)據(jù)
2. 篩選輸入的關(guān)鍵字是否在數(shù)據(jù)里面
*/
// 先用watch寫(xiě)
watch:{
keyword:{
immediate:true,
handler(newval,oldval){
this.filearr = this.arr.filter((currentval)=>{
return currentval.name.indexOf(newval) !== -1
/*
這里有個(gè)細(xì)節(jié)：indexOf去判斷 空字符串（不是空格） 時(shí)會(huì)返回0，
所以整個(gè)列表都會(huì)出來(lái)
例如："asdf".indexOf("") 返回的是0
所以需要向自調(diào)用一次使用immediate
*/
})
}
}
}
})
</script>
1.3 列表排序
<div id="root">
<h2>人員排序</h2>
<input type="text" placeholder="請(qǐng)輸入關(guān)鍵字" v-model="keyword">
<button @click="type = 2">年齡升序</button>
<button @click="type = 1">年齡降序</button>
<button @click="type = 0">原順序</button>
<ul>
<li v-for="val in filtername" :key="val.id">
{{val.name}} -- {{val.age}} -- {{val.gender}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el: '#root',
data: {
arr: [
{ id: "001", name: "馬冬梅", age: 18, gender: "female" },
{ id: "002", name: "周冬雨", age: 55, gender: "female" },
{ id: "003", name: "周杰倫", age: 50, gender: "male" },
{ id: "004", name: "郭艾倫", age: 59, gender: "male" },
{ id: "005", name: "郭德綱", age: 30, gender: "male" },
],
keyword:"",
type:0
},
computed:{
filtername:{
get(){
let arr = this.arr.filter((current)=>{
return current.name.indexOf(this.keyword) !== -1
})
arr.sort((a,b)=>{
/*
a永遠(yuǎn)在b前面
如果返回的值是大于0則交換位置，小于等于0不交換位置
return a-b 升序
return b-a 降序
*/
if(this.type)
{
return this.type == 1 ? b.age - a.age : a.age - b.age
}
})
return arr
}
}
}
})
</script>
總結(jié)
以上就是今天要講的內(nèi)容，本文介紹了和列表（渲染、排序、過(guò)濾）相關(guān)的知識(shí)，希望對(duì)大家有所幫助！
相關(guān)文章
基于vue cli重構(gòu)多頁(yè)面腳手架過(guò)程詳解
本文分步驟給大家介紹了基于vue cli重構(gòu)多頁(yè)面腳手架過(guò)程，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2018-01-01
vue+egg+jwt實(shí)現(xiàn)登錄驗(yàn)證的示例代碼
這篇文章主要介紹了vue+egg+jwt實(shí)現(xiàn)登錄驗(yàn)證的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式
這篇文章主要介紹了antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue跨端渲染實(shí)現(xiàn)多端無(wú)縫銜接
這篇文章主要介紹了Vue跨端渲染實(shí)現(xiàn)多端無(wú)縫銜接，Vue跨端渲染是一種基于Vue框架的跨平臺(tái)開(kāi)發(fā)技術(shù)，能夠?qū)崿F(xiàn)Web、iOS和Android三端的無(wú)縫銜接，提高開(kāi)發(fā)效率和用戶體驗(yàn)2023-05-05
axios無(wú)法加載響應(yīng)數(shù)據(jù):no?data?found?for?resource?with?given?i
最近在在做一個(gè)小查詢功能的時(shí)候踩了一個(gè)坑,所以這篇文章主要給大家介紹了關(guān)于axios無(wú)法加載響應(yīng)數(shù)據(jù):no?data?found?for?resource?with?given?identifier報(bào)錯(cuò)的解決方法,需要的朋友可以參考下2022-11-11
vue.js學(xué)習(xí)之UI組件開(kāi)發(fā)教程
前端開(kāi)發(fā)中,隨著業(yè)務(wù)的增多,出于效率的考慮,我們對(duì)于組件化開(kāi)發(fā)的需求也越來(lái)越迫切。下面這篇文章主要給大家介紹了關(guān)于vue.js之UI組件開(kāi)發(fā)的相關(guān)資料，文中介紹的非常詳細(xì)，需要的朋友們下面來(lái)一起看看吧。2017-07-07
Vue+elementUI?el-input輸入框手機(jī)號(hào)校驗(yàn)功能
這篇文章主要介紹了Vue+elementUI?el-input輸入框手機(jī)號(hào)校驗(yàn)功能,限制input框內(nèi)只能輸入數(shù)字,且為11位,通過(guò)實(shí)例代碼介紹了對(duì)輸入手機(jī)號(hào)做校驗(yàn)的方法,感興趣的朋友跟隨小編一起看看吧2023-10-10
vue父組件監(jiān)聽(tīng)子組件數(shù)據(jù)更新方式(hook)
這篇文章主要介紹了vue父組件監(jiān)聽(tīng)子組件數(shù)據(jù)更新方式(hook)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue中手動(dòng)封裝iconfont組件解析(三種引用方式的封裝和使用)
這篇文章主要介紹了vue中手動(dòng)封裝iconfont組件(三種引用方式的封裝和使用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue3實(shí)現(xiàn)地圖選點(diǎn)組件的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue3實(shí)現(xiàn)地圖選點(diǎn)組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01