vue.js从入门到深入再到随心而用———vue中v-for循环的四种使用

最新推荐文章于 2023-09-16 17:53:42 发布

学号Java

最新推荐文章于 2023-09-16 17:53:42 发布

阅读量331

点赞数 1

分类专栏： vue.js

本文链接：https://blog.csdn.net/qq_42147171/article/details/104978882

版权

vue.js 专栏收录该内容

29 篇文章 4 订阅

订阅专栏

vue中v-for循环的四种使用

1.v-for循环普通数组
2.v-for循环对象数组
3.v-for循环对象
4.v-for迭代数字
5.总结

1.v-for循环普通数组

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			
			<!--<p>{{list[0]}}</p>
			<p>{{list[1]}}</p>
			<p>{{list[2]}}</p>
			<p>{{list[3]}}</p>
			<p>{{list[4]}}</p>-->
			
			<p v-for="(item,i) in list">索引值:{{i}}--每一项：{{item}}</p>
		</div>
		<script type="text/javascript">
			
		new Vue({
			el:'#app',
			data:{
				list:[1,2,3,4,5]
			}
		})
		</script>

	</body>
</html>

2.v-for循环对象数组

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<p v-for="(user,i) in list">id:{{user.id}}---name:{{user.name}}----索引:{{i}}</p>
		</div>
		<script type="text/javascript">
			
		new Vue({
			el:'#app',
			data:{
				list:[
					{id:1,name:'ss1'},
					{id:2,name:'ss2'},
					{id:3,name:'ss3'},
					{id:4,name:'ss4'}
				]
			}	
		})
		</script>

	</body>
</html>

3.v-for循环对象

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<!--在遍历对象身上的键值对的时候，除了有val,key还有第三个值索引-->
			<p v-for="(val,key,i) in user">值是：{{val}}------键：{{key}}---------索引:{{i}}</p>
		</div>
		<script type="text/javascript">
			
		new Vue({
			el:'#app',
			data:{
				user:{
					id:1,
					name:'张三',
					gender:'男'
				}
			}
		})
		</script>

	</body>
</html>

4.v-for迭代数字

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<!--in后面我们放普通数组，对象数组，对象，还可以方数字-->
			<!--如果使用v-for迭代素质count从1开始-->
			<p v-for="count in 10">这是第{{count}}次循环</p>
		</div>
		<script type="text/javascript">
			
		new Vue({
			el:'#app',
			data:{

			}
		})
		</script>

	</body>
</html>

5.总结

in后面我们放普通数组，对象数组，对象，还可以方数字

学号Java

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue.js从入门到深入再到随心而用———vue中v-for循环的四种使用

vue中v-for循环的四种使用1.v-for循环普通数组2.v-for循环对象数组3.v-for循环对象4.v-for迭代数字5.总结1.v-for循环普通数组代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> ...
复制链接

扫一扫

专栏目录