将集合数据以表格、列表形式显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="container">
<ul>
<li v-for="c in categories">
<a :href="'query?cid=' + c.cid">{{c.cname}}</a>
</li>
</ul>
<table class="table table-bordered">
<tr>
<th>学号</th>
<th>照片</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr v-for="s,index in stus" :id="'tr'+s.stuNum">
<td>{{s.stuNum}}</td>
<td>
<img height="30" :src="s.stuImg" />
</td>
<td>{{s.stuName}}</td>
<td>
<!-- {{s.stuGender=='M'?'男':'女'}}-->
<img v-if="s.stuGender=='M'" src="img/m.bmp" />
<img v-else src="img/f.bmp" />
</td>
<td>{{s.stuAge}}</td>
<td>
<a class="btn btn-danger btn-xs" :href="'stu/delete?cid=' +s.stuNum">删除</a>
<a class="btn btn-success btn-xs" :href="'stu/update?cid=' +s.stuNum">修改</a>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#container",
data:{
categories:[
{
cid:1,
cname:"华为"
},{
cid:2,
cname:"小米"
},{
cid:3,
cname:"oppo"
},{
cid:4,
cname:"vivo"
}
],
stus:[
{
stuNum:"10010",
stuImg:"img/1.jpeg",
stuName:"Tom",
stuGender:"M",
stuAge:20
},{
stuNum:"10011",
stuImg:"img/2.jpg",
stuName:"lilei",
stuGender:"M",
stuAge:21
},{
stuNum:"10012",
stuImg:"img/3.jpg",
stuName:"lucy",
stuGender:"F",
stuAge:26
},{
stuNum:"10013",
stuImg:"img/4.jpg",
stuName:"polly",
stuGender:"F",
stuAge:20
}
]
}
});
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/128148.html
