Vue.js條件渲染和列表渲染以及Vue中key值的內(nèi)部原理

更新時(shí)間：2023年04月11日 11:16:41 作者：蘇涼.py

這篇文章主要介紹了Vue.js條件渲染和列表渲染，以及Vue中key值的內(nèi)部原理，文中有詳細(xì)的代碼示例，感興趣的同學(xué)可以參考閱讀

條件渲染

v-if

寫法:
(1).v-if="表達(dá)式"
(2).v-else-if="表達(dá)式"
(3).v-else="表達(dá)式"

適用于:切換頻率較低的場(chǎng)景。
特點(diǎn):不展示的DOM元素直接被移除。
注意: v-if可以和:v-else-if、v-else一起使用，但要求結(jié)構(gòu)不能被“打斷”。

實(shí)例：

// <!-- 使用v-if做條件渲染 if為true則把結(jié)構(gòu)直接從頁(yè)面上刪除-->
 <h2 v-if="n==1">蘇涼</h2>
 <h2 v-if="n==2">ming</h2>
 <h2 v-if="n==3">xiaohu</h2>

// <!-- v-else和v-else-if 中間不能斷開-->
 <h3 v-if="n==0">點(diǎn)擊按鈕查看四大名著</h3>
 <h3 v-else-if="n==1">西游記</h3>
 <h3 v-else-if="n==2">水滸傳</h3>
 <h3 v-else-if="n==3">三國(guó)演義</h3>
 <h3 v-else-if="n==4">紅樓夢(mèng)</h3>
 <h3 v-else>沒有更多了...</h3>

v-if配合template標(biāo)簽來(lái)使用，template不顯示在也買你中，可與v-if來(lái)使用控制一整個(gè)模塊的顯示和隱藏。

//<!-- template只能與v-if來(lái)配合使用 -->
<template v-if="n == 3">
    <h4>全部顯示</h4>
    <h4>全部顯示</h4>
    <h4>全部顯示</h4>    
</template>

v-show

寫法:
v-show="表達(dá)式"

適用于:切換頻率較高的場(chǎng)景。
特點(diǎn):不展示的DOM元素未被移除，僅僅是使用樣式隱藏掉。

//  <!-- 使用v-show做條件渲染,相當(dāng)添加了一個(gè)display=none -->
   <h2 v-show="n==1">蘇涼</h2>
   <h2 v-show="n==2">ming</h2>
   <h2 v-show="n==3">xiaohu</h2>

備注:使用v-if的時(shí)候，元素可能無(wú)法獲取到，而使用v-show一定可以獲取到。

列表渲染

v-for指令

1.用于展示列表數(shù)據(jù)
2.語(yǔ)法:v-for="(item,index) in xxx" : key="yyy"
3.可遍歷:數(shù)組、對(duì)象、字符串（用的很少)、指定次數(shù)（用的很少)

實(shí)例：

<!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://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="box">  
        <!-- 遍歷數(shù)組 -->
        <h2>人員信息</h2>
        <ul>
            <li v-for="(p,index) in persons" :key="index">
                {{p.name}}-{{p.age}}
            </li>
        </ul>

        <!-- 遍歷對(duì)象 -->
        <h2>汽車信息</h2>
        <ul>
            <li v-for="(value,key,index) in car" :key="index">
                {{index}}-{{key}}-{{value}}
            </li>
        </ul>

        <!-- 遍歷字符串 -->
        <h2>test</h2>
        <ul>
            <li v-for="(value,index) in str" :key="index">
                {{index}}-{{value}}
            </li>
        </ul>

        <!-- 遍歷指定數(shù)字 -->
        <h2>test1</h2>
        <ul>
            <li v-for="(value,index) in 5" :key="index">
                {{index}}-{{value}}
            </li>
        </ul>

    </div>

    <script>
        Vue.config.productionTip = false;  //阻止vue在啟動(dòng)時(shí)生成生產(chǎn)提示
        //創(chuàng)建實(shí)例
        let vm = new Vue({
            el:"#box",
            data:{
                persons:[
                    {id:01,name:"su",age:21},
                    {id:01,name:'ming',age:22},
                    {id:03,name:'xiaohu',age:25}
                ],
                car:{
                    name:"奧迪",
                    color:"black",
                    producted:"2021"
                },
                str:"beijing"
            }
        })
       
    </script>
</body>
</html>

實(shí)例效果：

面試題:key的內(nèi)部原理

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ī)則如下:

2. 對(duì)比規(guī)則:
(1). 舊虛擬DOM中找到了與新虛擬DOM相同的key:
1.若虛擬DOM中內(nèi)容沒變,直接使用之前的真實(shí)DOM !
2.若虛擬DOM中內(nèi)容變了，則生成新的真實(shí)DOM，隨后替換掉頁(yè)面中之前的真實(shí)DOM。
(2). 舊虛擬DOM中未找到與新虛擬DOM相同的key
創(chuàng)建新的真實(shí)DOM,隨后渲染到到頁(yè)面。

3. 用index作為key可能會(huì)引發(fā)的問(wèn)題:
1.若對(duì)數(shù)據(jù)進(jìn)行:逆序添加、逆序刪除等破壞順序操作:會(huì)產(chǎn)生沒有必要的真實(shí)DOM更新=>界面效果沒問(wèn)題,但效率低。
2.如果結(jié)構(gòu)中還包含輸入類的DOM:會(huì)產(chǎn)生錯(cuò)誤DOM更新=>界面有問(wèn)題。

4. 開發(fā)中如何選擇key?:
1.最好使用每條數(shù)據(jù)的唯一標(biāo)識(shí)作為key，比如id、手機(jī)號(hào)、身份證號(hào)、學(xué)號(hào)等唯一值。
2.如果不存在對(duì)數(shù)據(jù)的逆序添加、逆序刪除等破壞順序操作，僅用于渲染列表用于展示，使用index作為key是沒有問(wèn)題的。

以上就是Vue.js條件渲染和列表渲染以及Vue中key值的內(nèi)部原理的詳細(xì)內(nèi)容，更多關(guān)于Vue條件渲染和列表渲染及key值的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: