溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“Vue的列表渲染方法有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
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><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
}
}
})<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><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>在上面都用的index 作為key，但是在破壞順序修改dom以及有input內容就會出錯。僅在用于渲染頁面而不需要修改頁面時可用index作為key.
強烈建議用數據的唯一標識，如id、手機號、郵箱號作為key
key是虛擬DOM對象的標識，當數據發生變化時，Vue會根據[新數據]生成[新的虛擬DOM] ,隨后Vue進行[新虛擬DOM]與[舊虛擬DOM]的差異比較，比較規則如下:
(1).舊虛擬DOM中找到了與新虛擬DOM相同的key:
①.若虛擬DOM中內容沒變， 直接使用之前的真實DOM!
②.若虛擬DOM中內容變了，則生成新的真實DOM，隨后替換掉頁面中之前的真實DOM。
(2).舊虛擬DOM中未找到與新虛擬DOM相同的key創建新的真實DOM，隨后渲染到到頁面。
1.若對數據進行:逆序添加、逆序刪除等破壞順序操作:
會產生沒有必要的真實DOM更新==>界面效果沒問題，但效率低。
2.如果結構中還包含輸入類的DOM:
會產生錯誤DOM更新==> 界面有問題。
1.最好使用每條數據的唯一標識作 為key,比如id、 手機號、身份證號、學號等唯一值。
2.如果不存在對數據的逆序添加、逆序刪除等破壞順序操作，僅用于渲染列表用于展示，使用index作為key是沒有問題的。
“Vue的列表渲染方法有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
