一、效果图如图
二、代码如下
<!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>Document</title><script src="./js/vue.js"></script>
</head>
<body><div id="app"><span>班级:</span><input type="number" v-model="student.grade"></br><span>姓名:</span><input type="text" v-model="student.name"></br><span>性别:</span><select v-model="student.gender"><option value="男">男</option><option value="女">女</option></select></br><span>年龄:</span><input type="number" v-model="student.age"></br><button @click="add">添加学生</button><table border="1" width="50%" style="border-collapse: collapse;"><tr><th>序号</th><th>班级</th><th>姓名</th><th>性别</th><th>年龄</th><th>操作</th></tr><tr align="center" v-for="(item,index) in students"><td>{{index+1}}</td><td>{{item.grade}}</td><td>{{item.name}}</td><td>{{item.gender}}</td><td>{{item.age}}</td><td><button @click="del(index)">删除</button></td></tr></table></div><script>var vm=new Vue({el:'#app',data:{students:[{grade:'1',name:'李四',gender:'男',age: 25},{grade:'2',name:'王五',gender:'女',age: 21}],student:{}},methods:{add(){var p={grade:this.student.grade,name:this.student.name,gender:this.student.gender,age:this.student.age};this.students.push(p)},del(index){this.students.splice(index,1);}}})</script>
</body>
</html>
