效果圖：
修改功能不夠好，應該在修改時彈出一個專門的修改窗口進行修改功能。
增加就是向數組里添加，使用.push()就行，刪除和修改都使用splice(),查詢將數組里的學號與輸入的學號進行對比，查找到后彈出窗口顯示該學生姓名。
代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>學生信息管理</title> <link rel="stylesheet" href="css/index.css"> <script src="../../vue/vue.js"></script> </head> <body> <div id="app"> <table> <thead> <tr> <td>學號</td> <td>姓名</td> <td>班級</td> <td>專業</td> <td colspan="2">操作</td> </tr> </thead> <tbody> <tr v-cloak v-for="(item,index) in students"> <td>{{item.id1}}</td> <td>{{item.name1}}</td> <td>{{item.class1}}</td> <td>{{item.major}}</td> <td> <input type="button" value="刪除" id="del" @click="remove(index)"> <input type="button" value="修改" class="modi" @click="updatestu(index)"> </td> </tr> </tbody> </table> <div class="inp"> <label>學號：<input type="text" id="idc" v-model="student.id1"></label> <br/> <label>姓名：<input type="text" id="nam" v-model="student.name1"></label> <br/> <label>班級：<input type="text" id="cla" v-model="student.class1"></label> <br/> <label>專業：<input type="text" id="maj" v-model="student.major"></label> <br/> <input type="button" value="添加" class="add" @click="add"> <p>在上方輸入框輸入信息后點擊需修改那列的修改按鈕進行修改</p> <p>輸入學號查詢該學生姓名</p> <label>學號：<input type="text" id="idc" v-model="sear"></label> <input type="button" value="查詢" class="find" @click="search()"> </div> </div> <script src="js/index.js"></script> </body> </html>
var app=new Vue({ el: '#app', data:{ student:{ id1:'', name1:'', class1:'', major:'' }, sear:'', students:[] }, methods: { add:function(){ if(this.student.id1==''||this.student.name1==''||this.student.class1==''||this.student.major=='') { alert("輸入框不允許為空！！！"); } else{ this.students.push(this.student); this.student={}; } }, remove:function(index){ this.students.splice(index,1) }, search:function(){ if(this.sear=='') { alert("學號不允許為空！！！"); } else { for(var i=0;i<this.students.length;i++) { if(this.students[i].id1==this.sear){ alert("該學生姓名："+this.students[i].name1); } } } }, updatestu(index){ this.students.splice(index,1,this.student); this.student={}; } }, })