溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Vue.js條件渲染、列表渲染及Vue中key值的內部原理是什么”，在日常操作中，相信很多人在Vue.js條件渲染、列表渲染及Vue中key值的內部原理是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue.js條件渲染、列表渲染及Vue中key值的內部原理是什么”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
寫法:
(1).v-if="表達式"
(2).v-else-if="表達式"
(3).v-else="表達式"
適用于:切換頻率較低的場景。
特點:不展示的DOM元素直接被移除。
注意: v-if可以和:v-else-if、v-else一起使用，但要求結構不能被“打斷”。
實例：
// <!-- 使用v-if做條件渲染 if為true則把結構直接從頁面上刪除--> <h3 v-if="n==1">蘇涼</h3> <h3 v-if="n==2">ming</h3> <h3 v-if="n==3">xiaohu</h3> // <!-- v-else和v-else-if 中間不能斷開--> <h4 v-if="n==0">點擊按鈕查看四大名著</h4> <h4 v-else-if="n==1">西游記</h4> <h4 v-else-if="n==2">水滸傳</h4> <h4 v-else-if="n==3">三國演義</h4> <h4 v-else-if="n==4">紅樓夢</h4> <h4 v-else>沒有更多了...</h4>
v-if配合template標簽來使用，template不顯示在也買你中，可與v-if來使用控制一整個模塊的顯示和隱藏。
//<!-- template只能與v-if來配合使用 --> <template v-if="n == 3"> <h5>全部顯示</h5> <h5>全部顯示</h5> <h5>全部顯示</h5> </template>
寫法:
v-show="表達式"
適用于:切換頻率較高的場景。
特點:不展示的DOM元素未被移除，僅僅是使用樣式隱藏掉。
// <!-- 使用v-show做條件渲染,相當添加了一個display=none --> <h3 v-show="n==1">蘇涼</h3> <h3 v-show="n==2">ming</h3> <h3 v-show="n==3">xiaohu</h3>
備注:使用v-if的時候，元素可能無法獲取到，而使用v-show一定可以獲取到。
1.用于展示列表數據
2.語法:v-for="(item,index) in xxx" : key="yyy"
3.可遍歷:數組、對象、字符串（用的很少)、指定次數（用的很少)
實例：
<!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"> <!-- 遍歷數組 --> <h3>人員信息</h3> <ul> <li v-for="(p,index) in persons" :key="index"> {{p.name}}-{{p.age}} </li> </ul> <!-- 遍歷對象 --> <h3>汽車信息</h3> <ul> <li v-for="(value,key,index) in car" :key="index"> {{index}}-{{key}}-{{value}} </li> </ul> <!-- 遍歷字符串 --> <h3>test</h3> <ul> <li v-for="(value,index) in str" :key="index"> {{index}}-{{value}} </li> </ul> <!-- 遍歷指定數字 --> <h3>test1</h3> <ul> <li v-for="(value,index) in 5" :key="index"> {{index}}-{{value}} </li> </ul> </div> <script> Vue.config.productionTip = false; //阻止vue在啟動時生成生產提示 //創建實例 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>
實例效果：
1. 虛擬DOM中key的作用:
key是虛擬DOM對象的標識，當數據發生變化時，Vue會根據【新數據】生成【新的虛擬DOM】,
隨后Vue進行【新虛DOM】與【舊虛擬DOM】的差異比較，比較規則如下:
2. 對比規則:
(1). 舊虛擬DOM中找到了與新虛擬DOM相同的key:
1.若虛擬DOM中內容沒變,直接使用之前的真實DOM !
2.若虛擬DOM中內容變了，則生成新的真實DOM，隨后替換掉頁面中之前的真實DOM。
(2). 舊虛擬DOM中未找到與新虛擬DOM相同的key
創建新的真實DOM,隨后渲染到到頁面。
3. 用index作為key可能會引發的問題:
1.若對數據進行:逆序添加、逆序刪除等破壞順序操作:會產生沒有必要的真實DOM更新=>界面效果沒問題,但效率低。
2.如果結構中還包含輸入類的DOM:會產生錯誤DOM更新=>界面有問題。
4. 開發中如何選擇key?:
1.最好使用每條數據的唯一標識作為key，比如id、手機號、身份證號、學號等唯一值。
2.如果不存在對數據的逆序添加、逆序刪除等破壞順序操作，僅用于渲染列表用于展示，使用index作為key是沒有問題的。
到此，關于“Vue.js條件渲染、列表渲染及Vue中key值的內部原理是什么”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
