詳解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)容就會出錯。僅在用于渲染頁面而不需要修改頁面時(shí)可用index作為key.
強(qiáng)烈建議用數(shù)據(jù)的唯一標(biāo)識，如id、手機(jī)號、郵箱號作為key
1.虛擬DOM中key的作用:
key是虛擬DOM對象的標(biāo)識，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，Vue會根據(jù)[新數(shù)據(jù)]生成[新的虛擬DOM] ,隨后Vue進(jìn)行[新虛擬DOM]與[舊虛擬DOM]的差異比較，比較規(guī)則如下:
2.對比規(guī)則:
(1).舊虛擬DOM中找到了與新虛擬DOM相同的key:
①.若虛擬DOM中內(nèi)容沒變， 直接使用之前的真實(shí)DOM!
②.若虛擬DOM中內(nèi)容變了，則生成新的真實(shí)DOM，隨后替換掉頁面中之前的真實(shí)DOM。
(2).舊虛擬DOM中未找到與新虛擬DOM相同的key創(chuàng)建新的真實(shí)DOM，隨后渲染到到頁面。
3.用index作為key可能會引發(fā)的問題:
1.若對數(shù)據(jù)進(jìn)行:逆序添加、逆序刪除等破壞順序操作:
會產(chǎn)生沒有必要的真實(shí)DOM更新==>界面效果沒問題，但效率低。
2.如果結(jié)構(gòu)中還包含輸入類的DOM:
會產(chǎn)生錯誤DOM更新==> 界面有問題。
4.開發(fā)中如何選擇key?
1.最好使用每條數(shù)據(jù)的唯一標(biāo)識作 為key,比如id、 手機(jī)號、身份證號、學(xué)號等唯一值。
2.如果不存在對數(shù)據(jù)的逆序添加、逆序刪除等破壞順序操作，僅用于渲染列表用于展示，使用index作為key是沒有問題的。
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要介紹了vue項(xiàng)目依賴升級報(bào)錯處理方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue簡單封裝axios之解決post請求后端接收不到參數(shù)問題
這篇文章主要介紹了Vue簡單封裝axios之解決post請求后端接收不到參數(shù)問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
VUE2 前端實(shí)現(xiàn) 靜態(tài)二級省市聯(lián)動選擇select的示例
下面小編就為大家分享一篇VUE2 前端實(shí)現(xiàn) 靜態(tài)二級省市聯(lián)動選擇select的示例。具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
webpack dev-server代理websocket問題
這篇文章主要介紹了webpack dev-server代理websocket問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
UniApp是一個基于Vue.js開發(fā)的跨平臺應(yīng)用開發(fā)框架,它可以使用一套代碼同時(shí)構(gòu)建iOS、Android和Web應(yīng)用,這篇文章主要給大家介紹了關(guān)于如何使用vue3+uni-app封裝音樂播放插件的相關(guān)資料,需要的朋友可以參考下2023-11-11
vue路由傳參之使用query傳參頁面刷新數(shù)據(jù)丟失問題解析
這篇文章主要介紹了vue路由傳參使用query傳參頁面刷新數(shù)據(jù)丟失問題,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
今天小編就為大家分享一篇Vue前后端不同端口的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家介紹了關(guān)于Vue3中watch用法與最佳實(shí)踐的相關(guān)資料,watch的作用可以監(jiān)控一個值的變換,并調(diào)用因?yàn)樽兓枰獔?zhí)行的方法,可以通過watch動態(tài)改變關(guān)聯(lián)的狀態(tài),需要的朋友可以參考下2021-07-07
Vue 項(xiàng)目中使用布局組件來創(chuàng)建頁面布局的方式是完全可行的，而且在很多項(xiàng)目中都被廣泛采用，包括像 ruoyi 這樣的框架，這篇文章主要介紹了vue?layout模板頁的使用,需要的朋友可以參考下2023-08-08
ESLint是一個QA工具，這篇文章主要介紹了詳解ESLint在Vue中的使用小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10