v-for指令小案例

最新推荐文章于 2024-04-26 11:32:41 发布

夏木炎

最新推荐文章于 2024-04-26 11:32:41 发布

阅读量881

点赞数

分类专栏： Vue学习笔记文章标签： v-for 小案例

本文链接：https://blog.csdn.net/xm393392625/article/details/80985341

版权

Vue学习笔记专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一.案例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-for案例</title>
		<style>
			table{
				width: 620px;
				border: 2px solid plum;
				text-align: center;
			}
			thead{
				background-color: plum;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<table>
				<thead>
					<tr>
						<td>姓名</td>
						<td>年龄</td>
						<td>性别</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(p,index) in persons">
						<td>{{p.name}}</td>
						<td>{{p.age}}</td>
						<td>{{p.sex}}</td>
					</tr>
				</tbody>
			</table>
		</div>
		
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script>
			//1.创建Vue的实例
			let vm=new Vue({
				el:'#app',
				data:{
					persons:[
					   {name:'张三',age:16,sex:'男'},
					   {name:'李四',age:17,sex:'男'},
					   {name:'王麻子',age:18,sex:'女'},
					   {name:'赵六',age:19,sex:'男'},
					   {name:'刘七',age:20,sex:'女'}
					]
				}
			});
		</script>
	</body>
</html>

二.结果