vue实现学生录入系统之添加删除功能

来源：动视网责编：小采时间：2020-11-27 22:11:42

vue实现学生录入系统之添加删除功能

vue实现学生录入系统之添加删除功能:一.案例代码 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>vue指令综合案例</title> <style> #app{ margin: 50px auto; width: 620px;

推荐度：

点击下载本文 文档为doc格式

导读vue实现学生录入系统之添加删除功能:一.案例代码 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>vue指令综合案例</title> <style> #app{ margin: 50px auto; width: 620px;

一.案例代码

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>vue指令综合案例</title>
 <style>
 #app{
 margin: 50px auto;
 width: 620px;
 }
 fieldset{
 border: 2px solid plum;
 margin-bottom: 20px;
 }
 fieldset input{
 width: 200px;
 height: 30px;
 margin: 10px 0;
 }
 table{
 width: 620px;
 border: 2px solid plum;
 text-align: center;
 }
 thead{
 background-color: plum;
 }
 
 </style>
 </head>
 <body>
 <div id="app">
 <fieldset>
 <legend>学生录入系统</legend>
 <div>
 <span>姓名：</span>
 <input type="text" placeholder="请输入姓名" v-model="student.name"/>
 <span></span>
 </div>
 <div>
 <span>年龄：</span>
 <input type="text" placeholder="请输入年龄" v-model="student.age"/>
 </div>
 <div>
 <span>性别：</span>
 <select v-model="student.sex">
 <option value="男">男</option>
 <option value="女">女</option>
 </select>
 </div>
 <div>
 <span>QQ：</span>
 <input type="text" placeholder="请输入QQ" v-model="student.QQ"/>
 </div>
 <button @click="createNewStudent()">创建新用户</button>
 </fieldset>
 <table>
 <thead>
 <tr>
 <td>姓名</td>
 <td>年龄</td>
 <td>性别</td>
 <td>QQ</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>
 <td>{{p.QQ}}</td>
 <td><button @click="deleteStudentMsg(index)">删除</button></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:'男',QQ:'123456'},
 {name:'李四',age:17,sex:'男',QQ:'100000'},
 {name:'王麻子',age:18,sex:'女',QQ:'666666'},
 {name:'赵六',age:19,sex:'男',QQ:'888888'},
 {name:'刘七',age:20,sex:'女',QQ:'999999'}
 ],
 student:{name:'',age:0,sex:'男',QQ:''}
 },
 methods:{
 //创建一条新记录
 createNewStudent(){
 //姓名不能为空
 if(this.student.name==''){
 alert('姓名不能为空');
 return;
 }
 //年龄不能小于0
 if(this.student.age<0){
 alert('请输入正确年龄');
 return;
 }
 //QQ
 if(this.student.age==''){
 alert('请输入正确年龄');
 return;
 }
 //往数组中添加一条新记录
 this.persons.unshift(this.student);
 //清空数据
 this.student={name:'',age:0,sex:'男',QQ:''};
 },
 //删除
 deleteStudentMsg(index){
 this.persons.splice(index,1);
 }
 }
 });
 </script>
 </body>
</html>

二.结果