詳解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:遍歷對象屬性（常用）
<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)容就會出錯。僅在用于渲染頁面而不需要修改頁面時可用index作為key.
強烈建議用數(shù)據(jù)的唯一標識，如id、手機號、郵箱號作為key
1.虛擬DOM中key的作用:
key是虛擬DOM對象的標識，當數(shù)據(jù)發(fā)生變化時，Vue會根據(jù)[新數(shù)據(jù)]生成[新的虛擬DOM] ,隨后Vue進行[新虛擬DOM]與[舊虛擬DOM]的差異比較，比較規(guī)則如下:
2.對比規(guī)則:
(1).舊虛擬DOM中找到了與新虛擬DOM相同的key:
①.若虛擬DOM中內(nèi)容沒變， 直接使用之前的真實DOM!
②.若虛擬DOM中內(nèi)容變了，則生成新的真實DOM，隨后替換掉頁面中之前的真實DOM。
(2).舊虛擬DOM中未找到與新虛擬DOM相同的key創(chuàng)建新的真實DOM，隨后渲染到到頁面。
3.用index作為key可能會引發(fā)的問題:
1.若對數(shù)據(jù)進行:逆序添加、逆序刪除等破壞順序操作:
會產(chǎn)生沒有必要的真實DOM更新==>界面效果沒問題，但效率低。
2.如果結構中還包含輸入類的DOM:
會產(chǎn)生錯誤DOM更新==> 界面有問題。
4.開發(fā)中如何選擇key?
1.最好使用每條數(shù)據(jù)的唯一標識作 為key,比如id、 手機號、身份證號、學號等唯一值。
2.如果不存在對數(shù)據(jù)的逆序添加、逆序刪除等破壞順序操作，僅用于渲染列表用于展示，使用index作為key是沒有問題的。
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內(nèi)容!
相關文章
這篇文章主要介紹了vue腳手架文件結構及加載過程淺談,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-08-08
vue 實現(xiàn)強制類型轉(zhuǎn)換 數(shù)字類型轉(zhuǎn)為字符串
今天小編就為大家分享一篇vue 實現(xiàn)強制類型轉(zhuǎn)換 數(shù)字類型轉(zhuǎn)為字符串，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家詳細介紹了如何使用Vue3實現(xiàn)列表無限滾動的效果，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起了解一下2023-07-07
最近項目上要做一個車牌識別的功能,就需要做拖動截圖功能了,因為前段是vue,所以下面這篇文章主要給大家介紹了關于Vue拖動截圖功能的簡單實現(xiàn)方法,需要的朋友可以參考下2021-07-07
vue如何解決this.refs拿取v-for下元素undefine問題
這篇文章主要介紹了vue如何解決this.refs拿取v-for下元素undefine問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
下面小編就為大家分享一篇解決vue 更改計算屬性后select選中值不更改的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要給大家介紹了關于Vue中keep-alive組件的深入理解，文中通過實例代碼結束的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2020-08-08
這篇文章主要介紹了vue之計算屬性的緩存computed的用法解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
這篇文章主要為大家詳細介紹了Vue3.2中setup語法糖的具體使用方法，文中的示例代碼講解詳細，對我們深入了解Vue有一定的幫助，需要的可以參考一下2023-05-05
這篇文章主要為大家詳細介紹了Vue實現(xiàn)附件上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05