v-for循环

v-for 循环

要循环谁 就要在谁身上增加v-for属性
1、基本

<div id="app">
		<ul>
			<li v-for="fruit in fruites">{{fruit.name}}</li>     //注意in   和  of   等价
		</ul>
	</div>
	let vm = new Vue({
			el:'#app',
			data:{
				fruits:[{name:'西瓜'},{name:'香蕉'},{name:'苹果'}]
			}
		})

2、加索引值

  <div id="app">
	<ul>
		<li v-for="(fruit,index) in fruites">{{fruit.name}}{{index+1}}</li>
	</ul>
  </div>

3、二维数组

<div id="app">
			<ul>
				<li v-for="(fruit,index) in fruits">{{fruit.name}}{{index+1}}   //括号内第一个代表每一项，第二个代表索引值
					<ul>
						<li v-for="(c,childIndex) in fruit.color">{{c}}</li>         //注意是fruit.color,是每一项的color
					</ul>
				</li>
			</ul>
		</div>
	let vm = new Vue({
				el:'#app',
				data:{
					fruits:[
					{name:'西瓜',color:['green','pink']},
					{name:'香蕉',color:['green','pink']},
					{name:'苹果',color:['green','pink']}
					]
				}
			})

4、循环对象（不常用）

<div v-for="(key,value,index) in obj">{{key}}{{value}}{{index}}</div>
obj:{name:'aaaa',age:9,address:'xxxxxx'}