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>

<!--使用v-for遍历数据-->
<tr v-for="(hero, key) in heros">
    <td>{{ key + 1 }}</td>
    <td>{{ hero.name }}</td>
    <td>{{ hero.skill }}</td>
</tr>

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 = '';
        }
    }
})