一、回顧
上一次學習了通過屬性綁定爲元素添加樣式，今天主要學習v-for指令的迭代操作。
二、v-for指令學習
學習代碼如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue學習</title>
</head>
<body>
<div id="app">
<!-- 遍歷數組 -->
<p v-for="elem in arr">{{ elem }}</p>
<!-- 遍歷數組,同時獲取數組的索引 -->
<p v-for="(elem, i) in arr">元素爲：{{ elem }} + 索引爲：{{ i }}</p>
<!-- 遍歷對象數組 -->
<p v-for="user in userArr">名字爲：{{ user.name }} + 年齡爲：{{ user.age }}</p>
<!-- 遍歷對象 -->
<p v-for="(v , k, i) in obj">{{ k }} : {{ v }} + 索引爲：{{ i }}</p>
<!-- 遍歷迭代數字,從1開始 -->
<p v-for="num in 10">{{ num }}</p>
</div>
<script src="../js/vue2.6.10.js"></script>
<script>
//創建vue實例
var vm1 = new Vue({
el:"#app",
data:{
arr:[1,2,3,4,5,6],
userArr: [
{name: "笑笑", age: 666},
{name: "嘻嘻", age: 888}
],
obj: {
name: "笑笑obj",
gender: "男"
}
},
methods: {
}
});
</script>
</body>
</html>
另外注意一點，使用v-for迭代時，可以綁定一個key屬性，該屬性用於確定元素的唯一性，必須爲string/number類型，如下：
<p v-for="num in 10" :key="num">{{ num }}</p>