// <!-- 使用v-if做條件渲染 if為true則把結(jié)構(gòu)直接從頁面上刪除-->
 <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">點擊按鈕查看四大名著</h3>
 <h3 v-else-if="n==1">西游記</h3>
 <h3 v-else-if="n==2">水滸傳</h3>
 <h3 v-else-if="n==3">三國演義</h3>
 <h3 v-else-if="n==4">紅樓夢</h3>
 <h3 v-else>沒有更多了...</h3>

v-if配合template標簽來使用，template不顯示在也買你中，可與v-if來使用控制一整個模塊的顯示和隱藏。

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

v-show

寫法:
v-show="表達式"

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

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

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

列表渲染

v-for指令

1.用于展示列表數(shù)據(jù)
2.語法:v-for="(item,index) in xxx" : key="yyy"
3.可遍歷:數(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>

        <!-- 遍歷對象 -->
        <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在啟動時生成生產(chǎn)提示
        //創(chuàng)建實例
        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>

實例效果：

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

1. 虛擬DOM中key的作用:
key是虛擬DOM對象的標識，當數(shù)據(jù)發(fā)生變化時，Vue會根據(jù)【新數(shù)據(jù)】生成【新的虛擬DOM】,
隨后Vue進行【新虛DOM】與【舊虛擬DOM】的差異比較，比較規(guī)則如下:

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

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

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

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

您可能感興趣的文章: