vue實(shí)現(xiàn)學(xué)生錄入系統(tǒng)之添加刪除功能

更新時(shí)間：2018年07月11日 10:42:12 作者：夏木炎

本文給大家?guī)硪粋€(gè)小案例基于vue實(shí)現(xiàn)學(xué)生錄入系統(tǒng)功能，代碼簡單易懂非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

一.案例代碼

<!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>學(xué)生錄入系統(tǒng)</legend>
  <div>
   <span>姓名：</span>
   <input type="text" placeholder="請(qǐng)輸入姓名" v-model="student.name"/>
   <span></span>
  </div>
  <div>
   <span>年齡：</span>
   <input type="text" placeholder="請(qǐng)輸入年齡" 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="請(qǐng)輸入QQ" v-model="student.QQ"/>
  </div>
  <button @click="createNewStudent()">創(chuàng)建新用戶</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.創(chuàng)建Vue的實(shí)例
  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:{
   //創(chuàng)建一條新記錄
   createNewStudent(){
   //姓名不能為空
   if(this.student.name==''){
    alert('姓名不能為空');
    return;
   }
   //年齡不能小于0
   if(this.student.age<0){
    alert('請(qǐng)輸入正確年齡');
    return;
   }
   //QQ
   if(this.student.age==''){
    alert('請(qǐng)輸入正確年齡');
    return;
   }
   //往數(shù)組中添加一條新記錄
   this.persons.unshift(this.student);
   //清空數(shù)據(jù)
   this.student={name:'',age:0,sex:'男',QQ:''};
   },
   //刪除
   deleteStudentMsg(index){
   this.persons.splice(index,1);
   }
  }
  });
 </script>
 </body>
</html>

二.結(jié)果