Vue的列表之渲染,排序,過濾詳解
1. 列表(渲染、排序、過濾)
1.1 條件渲染指令
有個小技巧:
如果是查找對象中不存在的屬性,返回的是一個undefined,利用這一個點不管是v-show或者是v-if,如果值等於undefined的就不顯示,假設sex屬性不存在
<p v-show="student.sex">性別:{{student.sex}}</p>
1.1.1 v-show
1.v-show的原理:通過display:none 對元素進行隱藏,當滿足條件時去除display:none這個樣式
2.適用的場景是:切換頻率較高的場景
3.在使用v-show隱藏元素的時候是可以獲取得到元素的,而v-if 是無法獲取到元素的
1.1.2 v-if
1.v-if的原理:將整個節點移除,滿足條件時添加節點
2.v-else、v-else-if 需要配合v-if去使用,但是結構不能被破壞
必須要先寫v-if,例如:
v-if = "xxx" v-else = "xxx" --------------------- v-if = "xxx" v-else-if = "xxx" v-else = "xxx"
適用的場景:切換頻率比較低的場景
template
最大的特點就是不破壞結構但是隻能與 v-if 進行配合使用
1.1.3 v-if和v-show的小案例
<div id="root"> <h2>當前n的值為:{{n}}</h2> <button @click="n++">點擊我n加1</button> <div class="box1" v-show = "true">你好啊!我是box1</div> <div class="box1" v-show = "false">你好啊!我是box1</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 的區別 - v-if必須先寫,才能寫v-else和v-else-if - 例如: v-if v-if v-if 這樣是進行3次判斷 ------------------------------- v-if v-else-if v-else-if v-else 隻要有一個判斷為真,下面的語句就不執行 ---------------------------------- v-else 隻要不滿足v-if的條件就執行 --> <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> //當滿足條件的時候隻輸出滿足條件的值,例如本例子輸出為 ‘我是box31' <!-- 需求:當n == 2時,在頁面輸出5句話 4. template - 最大的特點就是不破壞結構 - 但是隻能和 v-if進行配合使用 --> <template v-if="n === 2"> <h3>你好啊!</h3> <h3>猜猜我是誰?</h3> <h3>我是box4</h3> <h3>你猜對瞭嗎?</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的原理)
特點:
1.可以遍歷數組
2.可以遍歷對象
3.可以遍歷字符串
4.可以遍歷次數(用的很少)
5.如果我們不寫key,默認使用index
作用:用於展示列表的數據
語法:v-for = "(item,index) in xxx" :key= "yyy"
key的原理:(很重要)
1.虛擬DOM中key的作用:
key是虛擬DOM對象的標識,當數據發生變化時,Vue會根據【新數據】生成【新的虛擬DOM】, 隨後Vue進行【新虛擬DOM】與【舊虛擬DOM】的差異比較,比較規則如下:
(1). 舊虛擬DOM中找到瞭與新虛擬DOM相同的key:
①若虛擬DOM中內容沒變, 直接使用之前的真實DOM
②若虛擬DOM中內容變瞭, 則生成新的真實DOM,隨後替換掉頁面中之前的真實DOM
(2). 舊虛擬DOM中未找到與新虛擬DOM相同的key直接創建新的真實DOM,隨後渲染到到頁面。
2.如果使用index作為key會引發以下的問題:
(1)如果發生逆序添加、逆序刪除破壞瞭順序操作就會產生沒有必要的DOM更新而會造成達不到效果的問題
(2)如果輸入結構包括瞭輸入類的DOM元素,會產生更新問題比如:input的框的數據對不上等等
3.所以在開發的過程中key的使用最好是使用唯一能夠標識的值作為key,比如id,Date.now(),nanoid這個包npm i nanoid
等等
1.2 列表過濾
使用computed
<div id="root"> <input type="text" placeholder="請輸入關鍵字" 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="請輸入關鍵字" v-model="keyword"> <br> <ul> <li v-for="value in filearr" :key="value.id" > {{value.name}} -- {{value.age}} -- {{value.gender}} </li> </ul> </div> <script> /* 分享一個數組去重的方法 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 : 寫的是過濾的條件 - 返回的是滿足條件的元素 indexOf: - 第一個參數是:要查詢的元素 - 第二個參數是:開始索引的位置 - 它返回的值是當前元素的索引值,如果沒有要查詢的元素返回的是-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:[] }, /* 需求:當輸入某一個關鍵字,輸出相關的內容 思路: 1. 獲取到用戶輸入的數據 2. 篩選輸入的關鍵字是否在數據裡面 */ // 先用watch寫 watch:{ keyword:{ immediate:true, handler(newval,oldval){ this.filearr = this.arr.filter((currentval)=>{ return currentval.name.indexOf(newval) !== -1 /* 這裡有個細節:indexOf去判斷 空字符串(不是空格) 時會返回0, 所以整個列表都會出來 例如:"asdf".indexOf("") 返回的是0 所以需要向自調用一次使用immediate */ }) } } } }) </script>
1.3 列表排序
<div id="root"> <h2>人員排序</h2> <input type="text" placeholder="請輸入關鍵字" 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永遠在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>
總結
以上就是今天要講的內容,本文介紹瞭和列表(渲染、排序、過濾)相關的知識,希望對大傢有所幫助!