一.案例代码
<!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>二.结果
