vue的v-for小练习表单

最新推荐文章于 2024-01-31 17:35:13 发布

liu1992452008

最新推荐文章于 2024-01-31 17:35:13 发布

阅读量615

点赞数

分类专栏： vuejs

本文链接：https://blog.youkuaiyun.com/liu1992452008/article/details/78567867

版权

vuejs 专栏收录该内容

34 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
				<script type="text/javascript" src="vue.js" ></script>

	</head>
	<style type="text/css">
		table{
			width:800px;
			border: 1px solid darkorange;
			text-align: center;
		}
		thead{
			background-color: orange;
		}
	</style>
	<body>
		<div id="app">
            <table border="" cellspacing="" cellpadding="" >
            	<thead>
            		<tr>
            		  <th>姓名</th>
            		  <th>年龄</th>
            		  <th>性别</th>
            	  </tr> 
            	</thead>
            	<tbody>
            		<tr v-for='p in  persons'>
            		<td>{{p.name}}</td>
            		<td>{{p.age}}</td>
            		<td>{{p.sex}}</td>
            	</tr>
            	</tbody>
            	
            </table>
       
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					persons:[
					{name:'张三',age:9,sex:'男'},
					{name:'李云',age:17,sex:'女'},
					{name:'刘丽',age:11,sex:'女'},
					{name:'马云',age:27,sex:'男'},
					{name:'许可',age:37,sex:'男'}
					]
				
				}
			})
		</script>
	</body>
</html>