专栏首页前端资源Vue.js学习笔记——事件监听

Vue.js学习笔记——事件监听

 * v-on:事件监听,为页面元素绑定各种监听事件。

        keydown:按键按下

        keyup:按键抬起

        click:鼠标单击

        dbclick:鼠标双击

        load:控件装载

        etd:页面装载

        ......

* @ 是v-on:的缩写,比如v-on:click可以写成@click

在 data 中定义一个 myMovie 变量,给它一个默认值‘阿凡达’,用于在页面中显示。

给页面中的按钮添加一个点击事件 v-on:click 并绑定在 methods 中设置的 btnClick 方法。

点击按钮修改对应的 myMovie 值,达到实时变化的效果。代码如下:

<div id="myApp">
    <h1>您最喜欢的电影是:{{ myMovie }}</h1>
    <button v-on:click="btnClick('老炮')">老炮</button>
    <button v-on:click="btnClick('阿凡达')">阿凡达</button>
    <button v-on:click="btnClick('变形金刚')">变形金刚</button>
    <button v-on:click="btnClick('速度与激情')">速度与激情</button>
    <button @click="btnClick('其他')">其他</button>
</div>
<script>
    var myApp = new Vue({
        el: '#myApp',
        data: {
            myMovie: '阿凡达'
        },
        methods: {
            btnClick: function (movie) {
                this.myMovie = movie;
            }
        }
    })
</script>

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 封装了一个tab切换插件

    自动给 tab 添加/删除 class 类 .on ,给切换的内容添加/删除 class 类 .active ,可以根据自己的需求设置样式。

    德顺
  • Discuz! X3.4提示Table './.../k_spider' is marked的解决办法

    (145) Table './.../k_spider' is marked as crashed and should be repaired

    德顺
  • Bootstrap滚动监听不用offset实现向下偏移

    Bootstrap滚动监听中文文档:http://v3.bootcss.com/javascript/#scrollspy 我就不在此赘述了。

    德顺
  • 早报:新华社批作业帮等App涉黄 网上课堂成“污秽温床”?

    1、 新华社:作业帮等APP涉黄,网上课堂咋成污秽温床 近期,部分网民反映,一些面向中小学生的学习类APP竟暗藏“小黄文”“荤段子”。记者调查发现,此类APP...

    用户1335017
  • The Wolfram Data Drop 技术_II

    WolframChina
  • 中堃数据携手浪潮共推天行认知加速解决方案

    2017年7月18日,中堃数据和计算专家浪潮在无锡联合发布了天行认知加速解决方案。此方案是4月28日中堃数据与浪潮签订战略合作协议加入“感知中国”大数据产业联盟...

    数据猿
  • 9-STM32物联网开发WIFI+GPRS基础篇(STM32+SIM800实现MQTT远程通信控制)

    https://www.cnblogs.com/yangfengwu/p/11484159.html

    杨奉武
  • 眼擎科技CEO朱继志:如何设计自动驾驶的视觉成像系统 | 吃瓜笔记

    量子位
  • CVE-2017-12617-Tomcat远程代码执行漏洞复现测试

    0x00前情提要 Apache Tomcat团队10月3日宣布,如果配置了默认servlet,则在9.0.1(Beta),8.5.23,8.0.47和7.0.8...

    FB客服
  • 中国电信胡杰:边缘注智,运营商政企网关开启“万物智联”新时代”

    中国电信北京研究院物联网和互联网+研发事业部总工程师胡杰为我们带来主题演讲“边缘注智,运营商政企网关开启“万物智联”新时代”。

    SDNLAB

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动