一、 任务目标
- 1、数据的正确渲染,包括样式。
- 2、增加每条记录的删除功能。
- 3、底部增加一个汇总当前页面学生人数的功能。
二、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>课堂练习</title>
<script src="vue.global.js"></script>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<style>
.box{
width: 1000px;
height: 300px;
text-align: center;
border-collapse: collapse;
}
.box tr td{
width: 140px;
height: 50px;
border: 2px solid black;
}
.btn{
border: none;
font-size: 16px;
background-color: rgba(0, 0, 0, 0);
}
.btn:hover{
color: red;
text-decoration: underline;
}
table tr:nth-of-type(2n+0) {
background-color: #e7eaed;
}
table tr:nth-of-type(