Vue的列表之渲染,排序,過(guò)濾詳解

更新時(shí)間：2022年02月24日 16:42:20 作者：Tree_wws

這篇文章主要為大家詳細(xì)介紹了Vue的列表之渲染,排序,過(guò)濾，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助

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)不能被破壞

必須要先寫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">你好?。ox1</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必須先寫，才能寫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>你好?。?lt;/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.如果我們不寫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)容沒變, 直接使用之前的真實(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)生沒有必要的DOM更新而會(huì)造成達(dá)不到效果的問(wèn)題

（2）如果輸入結(jié)構(gòu)包括了輸入類的DOM元素，會(huì)產(chǎn)生更新問(wèn)題比如：input的框的數(shù)據(jù)對(duì)不上等等

3.所以在開發(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 : 寫的是過(guò)濾的條件
          - 返回的是滿足條件的元素
        indexOf:
          - 第一個(gè)參數(shù)是：要查詢的元素
          - 第二個(gè)參數(shù)是：開始索引的位置
          - 它返回的值是當(dāng)前元素的索引值，如果沒有要查詢的元素返回的是-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寫
            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>