(1) 遍歷數(shù)組和對(duì)象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="../first/vue1026.js"></script>
</head>
<body>
<div id="app">
<span>列表</span>
<ul>
<li>{{list[0]}}</li>
<li>{{list[1]}}</li>
<li>{{list[2]}}</li>
<li>{{list[3]}}</li>
</ul>
<span>遍歷數(shù)組</span>
<!-- 在遍歷過程中,不使用索引值 -->
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
<!-- 在Vue2.0中數(shù)組的索引和值的順序?yàn)関-for="(值,索引) in array"，而在Vue1.0中順序相反。 -->
<ul>
<li v-for="(item,index) in list" :key="index">{{index}}-{{item}}</li>
</ul>
<span>遍歷對(duì)象</span>
<!-- 1. 若只獲取一個(gè)值：那么獲取的是value -->
<ul>
<li v-for="item in user">{{item}}</li>
</ul>
<!-- 2. 獲取value和key: 在Vue2.0中是v-for="(value,key) in object",而在Vue1.0中順序相反。 -->
<ul>
<li v-for="(item,key) in user">{{key}}：{{item}}</li>
</ul>
<!-- 2. 獲取value、key和index: 在Vue2.0中是v-for="(value,key,index) in object",而在Vue1.0中順序相反。 -->
<ul>
<li v-for="(item,key,index) in user">{{index}}：{{key}}：{{item}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
list:["火龍果","龍眼","獼猴桃","櫻桃"],
user:{
name:"liy",
phone:"123456"
}
}
});
</script>
</html>
(2) key屬性的作用
- 說明：在列表中間節(jié)點(diǎn)插入新的數(shù)據(jù)節(jié)點(diǎn)時(shí)，即若希望在B和C之間加入一個(gè)F，Diff算法（Vue的虛擬DOM的different算法）會(huì)將之前的C更新為F、D更新為C、E更新為D、然后再更新E，效率很低。
中間插入.png
- key的作用：使用key來給每一個(gè)節(jié)點(diǎn)添加一個(gè)唯一標(biāo)識(shí)，此時(shí)Diff算法就可以正確地識(shí)別此節(jié)點(diǎn) 并 找到正確的位置插入新的節(jié)點(diǎn)，從而高效地更新虛擬DOM，提升性能。
- 注意：我們?cè)谑褂胿-for時(shí)，建議為對(duì)應(yīng)的元素或組件添加一個(gè)key屬性；但是key需要具有唯一性，可使用item作為key，使用index作為key值其實(shí)無意義(并不能提升更新效率)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<script type="text/javascript" src="../first/vue1026.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list" :key="item">{{item}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
list:["火龍果","龍眼","獼猴桃","櫻桃"]
}
});
</script>
</html>
