这只是个简单的添加和删除，没有连接后台数据的
<%@ 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:,
hobby:'阅读'
},
{
name:'张三',
age:,
hobby:'体育'
}]
},
methods:{ createPerson: function(){
this.people.push(this.newPerson);
// 添加完newPerson对象后，重置newPerson对象
this.newPerson = {name: '', age: , sex: 'Male'}
},
deletePerson:function(index){
this.people.splice(index,);
}
}
});
</script>
</html>