Vue如何实现列表渲染，应用有什么-群英

上一篇：vue中修改滚动条样式怎么操作，代码是什么下一篇：JS数组方法中会修改和不会修改原数组的方法是什么

今天就跟大家聊聊有关“Vue如何实现列表渲染，应用有什么”的内容，可能很多人都不太了解，为了让大家认识和更进一步的了解，小编给大家总结了以下内容，希望这篇“Vue如何实现列表渲染，应用有什么”文章能对大家有帮助。

1. v-for:遍历数组内容（常用）

in 也可以用 of 代替

<body>
	<div id="div1">
		<li v-for='(p,i) in persons' :key=i>
			{{p.name}}--{{p.age}}
			<!-- 张--18
				 李--19
				 刘--17 -->
		</li>
	</div>
</body>
<script type="text/javascript">
	Vue.config.produnctionTps=false
 	new Vue({
		el:"#div1",
		data:{
			persons:[
				{id:'001',name:"张",age:18},
				{id:'002',name:"李",age:19},
				{id:'002',name:"刘",age:17},
			]
		}
	})
</script>

2. v-for:遍历对象属性（常用）

<body>
	<div id="div1">
		<li v-for='(p,k) in persons' :key=k>
			{{p}}--{{i}}
			<!-- 张--name
				 18--age -->
		</li>
	</div>
</body>
<script type="text/javascript">
	Vue.config.produnctionTps=false
 	new Vue({
		el:"#div1",
		data:{
			persons:{
				name:"张",
				age:18
			}
		}
	})

3.遍历字符串（不常用）

<body>
	<div id="div1">
		<li v-for='(p,i) in str' :key=i>
			{{p}}--{{i}}
			<!-- a--0 
				 b--1
				 c--2
				 d--3
				 e--4 -->
		</li>
	</div>
</body>
<script type="text/javascript">
	Vue.config.produnctionTps=false
 	new Vue({
		el:"#div1",
		data:{
			str:"abcde"
		}
	})
</script>

4.遍历指定次数（不常用）

<body>
	<div id="div1">
		<li v-for='(p,i) in 5' :key=i>
			{{p}}--{{i}}
			<!-- 1--0
				 2--1
				 3--2
				 4--3
				 5--4 -->
		</li>
	</div>
</body>