vue.js简单添加和删除
这只是个简单的添加和删除，没有连接后台数据的
<%@ 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>
