v-for

v-for 指令会根据绑定的元素一直循环
v-for 支持 Array Object 两种数据类型

v-for Array

v-for 循环数组时,内部可以使用 $index 变量,这事一个特殊变量, 用来获取下标

export

  • {{ item }}

source

<div id="app">
	<ul>
	  <li v-for="item in array">
	    {{ item }}
	  </li>
	</ul>
</div>
var app = new Vue({
  el: '#app',
  data: {
	array : [
		"a","b","c","d"	
	]
  }
});

v-for Object [ Map ]

v-for 循环字典数据(object,json,map) 类数据时,内部可以使用 $key 变量,这事一个特殊变量,用来获取键值

export

  • {{ key }} - {{ item }}

source

<div id="app2">
	<ul>
	  <li v-for="(key,item) in obj">
	    {{ key }} - {{ item }}
	  </li>
	</ul>
</div>
var app = new Vue({
  el: '#app2',
  data: {
	obj : {
		"a" : "1",
		"b" : "2",
		"c" : "3"
	}
  }
});

值域

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>
v-for 可以接收一个整数,它会重复模板数次。