vue表单创建删除
vue.js 2.0实现：
html部分：<div id="app">
<fieldset>
<legend>创建表单</legend>
<div class="form-group">
<label>姓名： </label>
<input type="text" v-model="newPerson.name" />
</div>
<div class="form-group">
<label>年龄： </label>
<input type="text" v-model="newPerson.age" />
</div>
<div class="form-group">
<label>性别： </label>
<select v-model="newPerson.sex" />
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="form-group">
<label> </label>
<button @click="createPerson">创建</button>
</div>
</fieldset>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>删除</th>
</tr>
<tr v-for="(person,index) in people">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
<td>{{person.sex}}</td>
<td :class="text-center"><button @click="deletePerson(index)"></button></td>
</tr>
</trable>
</div>
javascript部分：
var vm=new Vue({
el:'#app',
data:{
newPerson:{name:'',age:0,sex:'Male'},
people:[
{name:'Jack',age:30,sex:'Male'},
{name:'Bill',age:25,sex:'Male'},
{name:'Luly',age:18,sex:'Female'},
{name:'Mimi',age:20,sex:'Female'}
]},
methods:{
createPerson:function(){
this.people.push(this.newPerson);
this.newPerson={name='',age:0,sex:'Male'}
},
deletePerson:function(index){
this.people.splice(index,1);
}
}
})
