提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue.js v-for遍历数组

VueJS遍历数组 for
2023-09-27 14:22:47 时间 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="xiaonaihu" />
		<meta name="generator" content="HBuilder X" />
		<title>v-for遍历数组</title>
		<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 1.在遍历过程中，没有使用索引的下标值 -->
			<ul>
				<li v-for = "item in names">{{item}}</li>
			</ul>
			<!-- 2.在遍历的过程中，获取索引值 -->
			<ul>
				<li v-for = "(item,index) in names">
					{{index+1}}-->{{item}}
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data:{
					names:['pang','tou','xiao','nai','hu']
				}
			});
		</script>
	</body>
</html>

相关文章