v-model实例：英雄大会

实现以下的功能：

英雄大会.gif

每个英雄入场，需填写姓名及成名技，点添加后，英雄列表自动更新

思路很简单：

文本输入框用v-model绑定数据，点击添加时，将v-model绑定的数据注入到英雄列表数组中

具体代码

代码解析：

表单提交

    

        名称：
        
        
    
    

        成名技：
        
        
    
    
    请入场

code

数据展示

    {{ key + 1 }}
    {{ hero.name }}
    {{ hero.skill }}

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笔记目录