v-model实例：英雄大会

实现以下的功能：

英雄大会.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 = '';
        }
    }
})

如想了解更多的vue实例，请查阅我的vue笔记目录