詳解Vue的列表渲染
1. v-for:遍歷數(shù)組內(nèi)容（常用）
in 也可以用 of 代替
<body>
<div id="div1">
<li v-for='(p,i) in persons' :key=i>
{{p.name}}--{{p.age}}
<!-- 張--18
李--19
劉--17 -->
</li>
</div>
</body>
<script type="text/javascript">
Vue.config.produnctionTps=false
new Vue({
el:"#div1",
data:{
persons:[
{id:'001',name:"張",age:18},
{id:'002',name:"李",age:19},
{id:'002',name:"劉",age:17},
]
}
})
</script>
2. v-for:遍歷對(duì)象屬性（常用）
<body>
<div id="div1">
<li v-for='(p,k) in persons' :key=k>
{{p}}--{{i}}
<!-- 張--name
18--age -->
</li>
</div>
</body>
<script type="text/javascript">
Vue.config.produnctionTps=false
new Vue({
el:"#div1",
data:{
persons:{
name:"張",
age:18
}
}
})
3.遍歷字符串（不常用）
<body>
<div id="div1">
<li v-for='(p,i) in str' :key=i>
{{p}}--{{i}}
<!-- a--0
b--1
c--2
d--3
e--4 -->
</li>
</div>
</body>
<script type="text/javascript">
Vue.config.produnctionTps=false
new Vue({
el:"#div1",
data:{
str:"abcde"
}
})
</script>
4.遍歷指定次數(shù)（不常用）
<body>
<div id="div1">
<li v-for='(p,i) in 5' :key=i>
{{p}}--{{i}}
<!-- 1--0
2--1
3--2
4--3
5--4 -->
</li>
</div>
</body>
5.key 的作用和原理
在上面都用的index 作為key，但是在破壞順序修改dom以及有input內(nèi)容就會(huì)出錯(cuò)。僅在用于渲染頁(yè)面而不需要修改頁(yè)面時(shí)可用index作為key.
強(qiáng)烈建議用數(shù)據(jù)的唯一標(biāo)識(shí)，如id、手機(jī)號(hào)、郵箱號(hào)作為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ī)則如下:
2.對(duì)比規(guī)則:
(1).舊虛擬DOM中找到了與新虛擬DOM相同的key:
①.若虛擬DOM中內(nèi)容沒(méi)變， 直接使用之前的真實(shí)DOM!
②.若虛擬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)生沒(méi)有必要的真實(shí)DOM更新==>界面效果沒(méi)問(wèn)題，但效率低。
2.如果結(jié)構(gòu)中還包含輸入類(lèi)的DOM:
會(huì)產(chǎn)生錯(cuò)誤DOM更新==> 界面有問(wèn)題。
4.開(kāi)發(fā)中如何選擇key?
1.最好使用每條數(shù)據(jù)的唯一標(biāo)識(shí)作 為key,比如id、 手機(jī)號(hào)、身份證號(hào)、學(xué)號(hào)等唯一值。
2.如果不存在對(duì)數(shù)據(jù)的逆序添加、逆序刪除等破壞順序操作，僅用于渲染列表用于展示，使用index作為key是沒(méi)有問(wèn)題的。
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
淺談vue?腳手架文件結(jié)構(gòu)及加載過(guò)程
這篇文章主要介紹了vue腳手架文件結(jié)構(gòu)及加載過(guò)程淺談,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-08-08
vue 實(shí)現(xiàn)強(qiáng)制類(lèi)型轉(zhuǎn)換 數(shù)字類(lèi)型轉(zhuǎn)為字符串
今天小編就為大家分享一篇vue 實(shí)現(xiàn)強(qiáng)制類(lèi)型轉(zhuǎn)換 數(shù)字類(lèi)型轉(zhuǎn)為字符串，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue3實(shí)現(xiàn)列表無(wú)限滾動(dòng)的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何使用Vue3實(shí)現(xiàn)列表無(wú)限滾動(dòng)的效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起了解一下2023-07-07
Vue拖動(dòng)截圖功能的簡(jiǎn)單實(shí)現(xiàn)方法
最近項(xiàng)目上要做一個(gè)車(chē)牌識(shí)別的功能,就需要做拖動(dòng)截圖功能了,因?yàn)榍岸问莢ue,所以下面這篇文章主要給大家介紹了關(guān)于Vue拖動(dòng)截圖功能的簡(jiǎn)單實(shí)現(xiàn)方法,需要的朋友可以參考下2021-07-07
vue如何解決this.refs拿取v-for下元素undefine問(wèn)題
這篇文章主要介紹了vue如何解決this.refs拿取v-for下元素undefine問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
解決vue 更改計(jì)算屬性后select選中值不更改的問(wèn)題
下面小編就為大家分享一篇解決vue 更改計(jì)算屬性后select選中值不更改的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要給大家介紹了關(guān)于Vue中keep-alive組件的深入理解，文中通過(guò)實(shí)例代碼結(jié)束的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了vue之計(jì)算屬性的緩存computed的用法解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11
這篇文章主要為大家詳細(xì)介紹了Vue3.2中setup語(yǔ)法糖的具體使用方法，文中的示例代碼講解詳細(xì)，對(duì)我們深入了解Vue有一定的幫助，需要的可以參考一下2023-05-05
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)附件上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05