聽我說
從 條件渲染 那一篇，我學(xué)習(xí)到了如何用Vue對dom節(jié)點根據(jù)條件顯示
但單單有條件還不夠啊，有時候數(shù)據(jù)是一大坨一大坨的數(shù)據(jù)，如果Vue不提供咱要么使用“v-html” 要么就沒辦法實現(xiàn)
v-html又感覺太low了，Vue提供了另外的指令更好的實現(xiàn)，那便是：列表渲染
列表渲染：v-for
簡單的列表渲染可以使用v-for來完成，而Vue提供了兩種采用形式的列表渲染
- 數(shù)組
- 對象
列表渲染之數(shù)組
假設(shè)我有一個數(shù)組，然后我希望數(shù)組里面的數(shù)據(jù)，通過展示在ul的一個一個li里面，并且要求數(shù)組更新的同時li會自動的增減
假設(shè)data如下
//假設(shè)下面是Vue的配置對象
{
data:{
msgList:[
{
name:"張三",
age:19,
sex:"男"
},
{
name:"李四",
age:22,
sex:"男"
},
{
name:"王五",
age:20,
sex:"女"
},
{
name:"陳真",
age:30,
sex:"男"
},
]
}
}
那么dom節(jié)點可以這么寫，達到渲染的效果
<!--假設(shè)這是根節(jié)點的內(nèi)容-->
<ul>
<li v-for="item of msgList">
{{item.name}} - {{item.age}} - {{item.sex}}
</li>
</ul>
此時，ul里面的li渲染出的個數(shù)等同于msgList的個數(shù)，同時item表示當前l(fā)i的數(shù)組元素
可以用JavaScript的for-of循環(huán)來理解，這里用v-for="item in msgList"也是一樣的效果
item都是表示msgList的成員
完整代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<ul>
<li v-for="item of msgList">
{{item.name}} - {{item.age}} - {{item.sex}}
</li>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el:"#root",
data:{
msgList:[{
name:"張三",
age:19,
sex:"男"
},
{
name:"李四",
age:22,
sex:"男"
},
{
name:"王五",
age:20,
sex:"女"
},
{
name:"陳真",
age:30,
sex:"男"
}]
}
})
</script>
</html>
列表渲染之對象
Vue還允許配置為對象這種可遍歷的變量來使用v-for
如果配置為對象的話，那么會拿到兩個參數(shù)，一個是key一個是value（先拿到value在拿到key）
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<ul>
<li v-for="(value,key) of msgObj">
{{key}} - {{value}}
</li>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el:"#root",
data:{
msgObj:{
name:"陳真",
age:30,
sex:"男"
}
}
})
</script>
</html>
當然也可以寫一個參數(shù)，只接受value
<div id="root">
<ul>
<li v-for="value of msgObj">
{{value}}
</li>
</ul>
</div>
完全寫法
無論是對象還是數(shù)組，列表渲染都會給當前值索引，所以對于數(shù)組的話就可以寫成兩個參數(shù)，顯示value后是索引
<ul>
<li v-for="(item,index) of msgList">
{{index}}、{{item.name}} - {{item.age}} - {{item.sex}}
</li>
</ul>
如何使對象的話就這么寫
<ul>
<li v-for="(value,key,index) of msgObj">
{{index}}、{{key}} = {{value}}
</li>
</ul>
key的應(yīng)用&渲染原理淺析
為了避免出錯，無論是react還是vue使用v-for，原則上都應(yīng)該配置唯一標識作為key
當出現(xiàn)要對數(shù)據(jù)修改時，未配置唯一標識key可能會出現(xiàn)bug
因此對于需要用上v-for的節(jié)點請配置上數(shù)據(jù)唯一標識作為key
詳細解釋請參照：維護狀態(tài)
淺析出錯原因
Vue在監(jiān)控到數(shù)據(jù)改變時，并不會如我們所想的一樣馬上渲染dom
而是會先渲染虛擬dom，然后通過特定算法或者說特定規(guī)則去渲染實際dom
渲染規(guī)則如下：
- 當遇到v-for時，首先尋找數(shù)據(jù)老的虛擬dom和新的虛擬dom的唯一標識進行對比（以li為例）
- 在li節(jié)點中，如果有一樣的部分那么照搬老的dom，不重新渲染，直接搬運反之根據(jù)新的虛擬dom重新渲染
- 如果li中這個節(jié)點在舊虛擬dom不存在，那么久會按照新的虛擬dom重新渲染
不放圖片說不清楚，放圖片說一大堆，搬出尚硅谷的視頻吧：零基礎(chǔ)入門Vue之key的作用和原理
key的具體用法
key 的特殊 attribute 主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對比時辨識 VNodes。如果不使用 key，Vue 會使用一種最大限度減少動態(tài)元素并且盡可能的嘗試就地修改/復(fù)用相同類型元素的算法。而使用 key 時，它會基于 key 的變化重新排列元素順序，并且會移除 key 不存在的元素。
對于 Vue中的key 的用法也很簡單，他是為了標識v-for每個循環(huán)元素的唯一性，所以key也應(yīng)該是唯一的
寫法如下
<dom v-for="item in list" :key="item.id"></dom>
此時，當前dom與數(shù)據(jù)唯一的id互相綁定，這樣如果dom更新了，新舊虛擬dom就能一一對應(yīng)的去對比
就不會出現(xiàn)元素紊亂，并且渲染效率低下的問題
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<ul>
<li v-for="item of msgList" :key="item.id">
{{item.name}} - {{item.age}} - {{item.sex}}
</li>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el:"#root",
data:{
msgList:[{
id:1,
name:"張三",
age:19,
sex:"男"
},
{
id:2,
name:"李四",
age:22,
sex:"男"
},
{
id:3,
name:"王五",
age:20,
sex:"女"
},
{
id:4,
name:"陳真",
age:30,
sex:"男"
}]
}
})
</script>
</html>
注：切忌把索引作為key，因為只要不是往末尾插入數(shù)據(jù)或者刪除數(shù)據(jù)的方式來修改數(shù)據(jù)，都會造成index失去唯一標識的作用
The End
本片完~文章來源：http://www.zghlxwxcb.cn/news/detail-825140.html
下一篇：零基礎(chǔ)入門Vue之畫龍點睛——再探監(jiān)測數(shù)據(jù)文章來源地址http://www.zghlxwxcb.cn/news/detail-825140.html
到了這里，關(guān)于零基礎(chǔ)入門Vue之影分身之術(shù)——列表渲染&渲染原理淺析的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![FE_Vue學(xué)習(xí)筆記 條件渲染[v-show v-if] & 列表渲染[v-for] 列表過濾 列表排序](https://imgs.yssmx.com/Uploads/2024/02/446581-1.png)
