Vue v-for指令

最新推荐文章于 2024-03-29 20:43:15 发布

_GGG

最新推荐文章于 2024-03-29 20:43:15 发布

阅读量2.5k

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_45748438/article/details/119616551

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

列表渲染 v-for 指令的使用

v-for指令可以用来遍历数组/对象，它可以根据data中数据的更新动态刷新视图

遍历数组
1.1 使用方式： v-for=“item in arr” item是一个参数，表示数组中的每一项，arr也是一个参数，表示你要遍历的数组
1.2 使用方式： v-for="(item, index) in arr" index表示数组项的索引 ⭐
遍历对象
2.1 使用方式：v-for=“value in obj” value 表示对象的属性的值 obj就是需要遍历的对象
2.2 使用方式：v-for="(value, key, index) in obj" key表示对象的键 index表示这个对象属性的索引，类似上面的数组的index

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 本案例演示遍历显示出数组中的每一项元素 -->
		<div id="box">
			<ul>
				<li v-for="(value,index) in emp" >
					<a href="#">{{index+1}}:{{value}}</a>
				</li>
			</ul>
		</div>
		<script src="JS/vue.min.js""></script>
		<script>
			var ve=new Vue({
				el:"#box",
				data:{
					emp:[
						"项目经理",
						"总监",
						"程序员"
					]
				}
			})
		</script>
	</body>
</html>

_GGG

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue v-for指令

列表渲染 v-for 指令的使用v-for指令可以用来遍历数组/对象，它可以根据data中数据的更新动态刷新视图遍历数组1.1 使用方式： v-for=“item in arr” item是一个参数，表示数组中的每一项，arr也是一个参数，表示你要遍历的数组1.2 使用方式： v-for="(item, index) in arr" index表示数组项的索引 ⭐遍历对象2.1 使用方式：v-for=“value in obj” value 表示对象的属性的值 obj就是需要遍历的对象
复制链接

扫一扫