<head>
<title>学生列表</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<button @click="add">添加学生</button>
<button @click="del">删除学生</button>
<table>
<tr>
<th>班级</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr align="center" v-for="item in students">
<td>{{item.grade}}</td>
<td>{{item.name}}</td>
<td>{{item.gender}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
students:[]
},
methods:{
//添加学生信息
add(){
var student = {
grade: '软件14班',
name: '张三',
gender: '女',
age: 20
}
this.students.push(student)
},
//删除学生信息
del(){
this.students.pop()
}
}
})
</script>
</body>
</html>
