溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“Vue.js條件渲染、列表渲染及Vue中key值的內(nèi)部原理是什么”，在日常操作中，相信很多人在Vue.js條件渲染、列表渲染及Vue中key值的內(nèi)部原理是什么問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Vue.js條件渲染、列表渲染及Vue中key值的內(nèi)部原理是什么”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
寫法:
(1).v-if="表達式"
(2).v-else-if="表達式"
(3).v-else="表達式"
適用于:切換頻率較低的場景。
特點:不展示的DOM元素直接被移除。
注意: v-if可以和:v-else-if、v-else一起使用，但要求結(jié)構(gòu)不能被“打斷”。
實例：
// <!-- 使用v-if做條件渲染 if為true則把結(jié)構(gòu)直接從頁面上刪除--> <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標(biāo)簽來使用，template不顯示在也買你中，可與v-if來使用控制一整個模塊的顯示和隱藏。
//<!-- template只能與v-if來配合使用 --> <template v-if="n == 3"> <h5>全部顯示</h5> <h5>全部顯示</h5> <h5>全部顯示</h5> </template>
寫法:
v-show="表達式"
適用于:切換頻率較高的場景。
特點:不展示的DOM元素未被移除，僅僅是使用樣式隱藏掉。
// <!-- 使用v-show做條件渲染,相當(dāng)添加了一個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.用于展示列表數(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ù)組 --> <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> <!-- 遍歷指定數(shù)字 --> <h3>test1</h3> <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>
實例效果：
1. 虛擬DOM中key的作用:
key是虛擬DOM對象的標(biāo)識，當(dāng)數(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ù)的唯一標(biāo)識作為key，比如id、手機號、身份證號、學(xué)號等唯一值。
2.如果不存在對數(shù)據(jù)的逆序添加、逆序刪除等破壞順序操作，僅用于渲染列表用于展示，使用index作為key是沒有問題的。
到此，關(guān)于“Vue.js條件渲染、列表渲染及Vue中key值的內(nèi)部原理是什么”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
