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>

二.結果