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

2019-11-19 13:30:53

字体：大中小

来源：转载

供稿：网友

一.案例代码

<!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>

二.结果