基礎
v-for 類似於JS中的for循環
語法格式： item in arr
v-for遍歷數組
<body>
<div id="app">
//<!-- for遍歷數組 在遍歷過程中沒有使用索引值 -->
<ul>
<li v-for="book in books">{{book}}</li>
</ul>
// <!-- 在遍歷的過程中獲取下標值（索引值） -->
<ul>
<li v-for="(book,index) in books">{{index+1}}-{{book}}</li>
</ul>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
books:["紅樓夢","水滸傳","西遊記","三國演義"]
}
})
</script>
</body>
v-for遍歷對象
<body>
<div id="app">
//<!-- for遍歷對象
//在遍歷對象的過程中，如果只是獲取一個值，獲取的只是value -->
<ul>
<li v-for="value in info">{{value}}</li>
</ul>
// <!-- 格式：（value,key） -->
<ul>
<li v-for="(value,key) in info">{{key}}-{{value}}</li>
</ul>
// <!-- 獲取索引值 格式：（value,key,index）-->
<ul>
<li v-for="(value,key,index) in info">{{index}}-{{key}}-{{value}}</li>
</ul>
</div>
<script src="../vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
info:{
name:"Anna",
age:25,
tel:666666
}
}
})
</script>
</body>
