這只是個簡單的添加和刪除，沒有連接后台數據的
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <div id="app" style="width:500px"> <fieldset> <legend>添加用戶信息</legend> <div class="form-groud" > <label>姓名：</label> <input type="text" v-model="newPerson.name"/> </div> <div class="form-groud"> <label>年齡：</label> <input type="text" v-model="newPerson.age"/> </div> <div class="form-groud"> <label>愛好：</label> <select v-model="newPerson.hobby"> <option value="體育">體育</option> <option value="閱讀">閱讀</option> <option value="旅游">旅游</option> </select> </div> <div class="from-groud"> <label></label> <button @click="createPerson">添加</button> </div> </fieldset> <table width="500px" border="1px"> <tr> <td>姓名</td> <td>年齡</td> <td>愛好</td> <td>操作</td> </tr> <tr v-for="person in people"> <td>{{person.name}}</td> <td>{{person.age}}</td> <td>{{person.hobby}}</td> <td :class="'text-center'"><button @click="deletePerson($index)">刪除</button></td> </tr> </table> </div> </body> <script type="text/javascript" src="${pageContext.request.contextPath}/js/vue.js "></script> <script> var wm = new Vue({ el:'#app', data:{ newPerson:{ name:'', age:'', hobby:'' }, people:[{ name:'Lucy', age:20, hobby:'閱讀' }, { name:'張三', age:30, hobby:'體育' }] }, methods:{ createPerson: function(){ this.people.push(this.newPerson); // 添加完newPerson對象后，重置newPerson對象 this.newPerson = {name: '', age: 0, sex: 'Male'} }, deletePerson:function(index){ this.people.splice(index,1); } } }); </script> </html>