v-for

v-for

1.循环整数

		<div id="app">
			<ul>
				<li v-for="n in 9">
					{{n}}
				</li>
			</ul>
		</div>
		<script>
			const app = new Vue({
				el: '#app',
			})
		</script>

#结果：

2. 模板循环v-for

		<div id="app">
			<h1>模板中使用 v-for:</h1>
			<ol>
				<template v-for="site in i">
					<!-- 模板中使用 v-for -->
					<li>模板循环：
						{{ site.name }}
					</li>
					<li>----------</li>
			</ol>
			</template>
		</div>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
							i: [
								{name: '小张'},
								{name: '小王'},
								{name: '小李'}
								]
							}
			})
		</script>

#结果：

3.v-for 可以绑定数据到数组来渲染一个列表：

		<div id="app">
			<ol>
				<li v-for="site in ia">
					{{ site.last }}
				</li>
				<li>----------</li>
			</ol>
		</div>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					ia: [{
							last: 'a'
						},
						{
							last: 'b'
						},
						{
							last: 'c'
						},
					]
				}
			})
		</script>

#结果：

4. v-for 可以通过一个对象的属性来迭代数据

		<div id="app">
			<ul>
				<li v-for="value in object">
					{{value}}
				</li>
			</ul>
		</div>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					object: {
						student: '小爱',
						city: '重庆',
						email: 'sina @126.com',
					}
				}
			})
		</script>

#结果：

5. v-for="(value,key) in object"提供第二个的参数key为键名:

		<div id="app">
			<ul>
				<li v-for="(value,key) in object">
					{{key}}:{{value}}
				</li>
			</ul>
		</div>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					object: {
						student: '小爱',
						city: '重庆',
						email: 'sina @126.com',
					}
				}
			})
		</script>

#结果：

6.v-for="(value,key,index) in object"第三个参数index为索引：

		<div id="app">
			<ul>
				<li v-for="(value,key,index) in object">
					{{index}}.{{key}}:{{value}}
				</li>
			</ul>
		</div>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					object: {
						student: '小爱',
						city: '重庆',
						email: 'sina @126.com',
					}
				}
			})
		</script>

#结果：