首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue.js学习笔记——事件监听

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

作者头像
德顺
发布2019-11-13 17:01:57
5.2K0
发布2019-11-13 17:01:57
举报
文章被收录于专栏:前端资源前端资源
 * 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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-09-12),如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档