vue.js之v-for

v-for 指令（列表渲染）

list是数组

 <div id="app">
   <div v-for="item in list">{{item}}</div>
 </div>
 
 <script>
 let app = new Vue({
    el:"#app",
    data:{
        list:['Tom','John','Lisa']
    }
 });
 </script>

---

v-for 还支持一个可选的第二个参数为当前项的索引。

<div id="app">
	<div v-for="(item,index) in list">{{index}}.{{item}}</div>
</div>

<script>
	let app = new Vue({
		el: "#app",
		data: {
			list: ['Tom', 'John', 'Lisa']
		}
	});
</script>

---

list是对象

<div id="app">
	<div v-for="item in list">{{item}}</div>
</div>

<script>
	let app = new Vue({
		el: "#app",
		data: {
			list: {
				name:"Tom",
				age:20,
				sex:"man"
			}
		}
	});
</script>

---

第二个参数为键名：

<div id="app">
	<div v-for="(item,key) in list">{{key}}:{{item}}</div>
</div>

<script>
	let app = new Vue({
		el: "#app",
		data: {
			list: {
				name:"Tom",
				age:20,
				sex:"man"
			}
		}
	});
</script>

---

第三个参数为索引：

<div id="app">
	<div v-for="(item,key,index) in list">{{ index }}.{{key}}:{{item}}</div>
</div>

<script>
	let app = new Vue({
		el: "#app",
		data: {
			list: {
				name:"Tom",
				age:20,
				sex:"man"
			}
		}
	});
</script>