vue(4)v-for循环

最新推荐文章于 2024-06-05 14:26:44 发布

taojYang

最新推荐文章于 2024-06-05 14:26:44 发布

阅读量253

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_43293451/article/details/92794077

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue</title>
	<style type="text/css">
		table tr td{
			border:1px solid gray;
		}
		table{
			border-collapse:collapse;
			width:500px;
		}
		tr.firstLine{
			background-color: lightgray;
		}
	</style>
</head>
<body>
	<script type="text/javascript" src="vue.min.js"></script>

	<div id="div1">
		<table align="center">
			<tr class="firstLine">
			<td>name</td>
			<td>hp</td>
			<td>number</td>
			</tr>
			<tr v-for="hero,index in heros"><!--循环，index获取遍历下标-->
				<td>{{index+1}}</td>
				<td>{{hero.name}}</td>
				<td>{{hero.hp}}</td>
			</tr>
		</table>
	</div>

	<script type="text/javascript">
		var data=[
			{"name":"盖伦","hp":341},
			{"name":"提莫","hp":225},
			{"name":"annie","hp":241}
		];
		new Vue({
			el:"#div1",
			data:{
				heros:data
			}
		});
	</script>

	<div id="div2"><!--数字遍历-->
		<div v-for="i in 10">
			{{i}}
		</div>
	</div>
	<script type="text/javascript">
		new Vue({
			el:"#div2"
		});
	</script>
</body>
</html>

在这里插入图片描述

taojYang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue(4)v-for循环

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <style type="text/css"> table tr td{ border:1px solid gray; } ta...
复制链接

扫一扫

专栏目录