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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

使用HeadlessChrome做单页应用SEO

随着react、vue、angular等前端框架的流行越来越多的web应用变成了单页应用,它们的特点是异步拉取数据在浏览器中渲染出HTML。使用这些框架极大的...

33550
来自专栏Java社区

6小时 jQuery开发一个前端应用教程视频

21530
来自专栏Java Web

SpringBoot技术栈搭建个人博客【前台开发/项目总结】

先吐槽一句..写页面是真的不擅长,然后限于时间的问题,我开始考虑换用Bootstrap来完成页面的编写,因为时间有限(我得在实习完之前把所有页面开发完),学习V...

31250
来自专栏FreeBuf

Google最新XSS Game Writeup

本文介绍了如何完成谷歌最新的XSSGame的过程,完成了这八个挑战就有机会获得Nexus 5x。实际上这八个挑战总体来说都不难,都是些常见的xss。通关要求是只...

258100
来自专栏葡萄城控件技术团队

哪些JavaScript IDE最好用?

阅读本文之前,分享大家一张图片,看图会发现JavaScript开发需求最高,占比达到42.84%,因此掌握JavaScript语言好工作就不愁啦,工欲善其事必先...

29450
来自专栏Java Web

SpringBoot技术栈搭建个人博客【前台开发/项目总结】Bootstrap or Vue?前台页面分析后台页面分析项目总结

36430
来自专栏Python数据科学

手把手教你爬取Instagram博主照片和视频

原文:https://www.jianshu.com/p/b2e077c07c70

4.2K10
来自专栏张戈的专栏

DX-Seo与WP-codebox插件冲突解决方法

这两天折腾代码高亮插件,折腾得够呛!缘由要不就是导致网站爆卡,要不就是点击复制按钮出问题。 这里说下 wp-codebox 和 DX-Seo 插件冲突的现象及解...

30090
来自专栏ROBOTEDU

OMRONFZ系列视觉与ABB机器人的通信

ABB与OMRON之间的通信,本例采用以太网TCP无协议模式通信。通过以太网由ABB机器人程序控制ONRON视觉的场景切换,拍照判断及其判断数据的 接收。 ?...

52650
来自专栏Java帮帮-微信公众号-技术文章全总结

WordPress你要会用

WordPress你要会用 虽然是PHP开发的,但不能忽律它的简单化 WordPress介绍 WordPress是一种使用PHP语言开发的博客平台,用...

48450

扫码关注云+社区

领取腾讯云代金券