实现以下的功能：
英雄大会.gif
每个英雄入场，需填写姓名及成名技，点添加后，英雄列表自动更新
思路很简单：
文本输入框用v-model绑定数据，点击添加时，将v-model绑定的数据注入到英雄列表数组中
代码解析：
表单提交
<form class="form-inline" role="form">
<div class="form-group">
<label class="" for="name">名称：</label>
<!--绑定数据 name -->
<input v-model="name" type="text" class="form-control" id="name" placeholder="尊姓大名">
</div>
<div class="form-group col-lg-offset-1">
<label class="" for="skill">成名技：</label>
<!--绑定数据 skill -->
<input v-model="skill" type="text" class="form-control" id="skill" placeholder="成名技">
</div>
<!--使用事件修饰符.prevent阻止默认的submit事件，并触发自定义的insert方法-->
<button @click.prevent="insert" type="submit" class="btn btn-success">请入场</button>
</form>
code
数据展示
<!--使用v-for遍历数据-->
<tr v-for="(hero, key) in heros">
<td>{{ key + 1 }}</td>
<td>{{ hero.name }}</td>
<td>{{ hero.skill }}</td>
</tr>
vue事件
let vm = new Vue({
el: "#app",
data: {
name: '',
skill: '',
heros: []
},
methods: {
insert() {
// 将新增的数据推送到数组中
this.heros.push({
name: this.name,
skill: this.skill
});
// 表单中的值清空
this.name = '';
this.skill = '';
}
}
})
