实现以下的功能:
英雄大会. gif
每个英雄入场, 需填写姓名及成名技, 点添加后, 英雄列表自动更新
思路很简单:
文本输入框用 v-model 绑定数据, 点击添加时, 将 v-model 绑定的数据注入到英雄列表数组中
具体代码 https://gitee.com/zhiqiexing/vue.js/blob/34815855f5770edff751b0890e7e856341704c79/code/01/13.html
代码解析:
表单提交
- <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 = '';
- }
- }
- })
来源: http://www.jianshu.com/p/2f21edb72723