事件处理器v-on:(event)/@(event)

小灰灰 2021-11-14 14:10 311阅读 0赞

<!DOCTYPE html>
    <html lang="zh">
    
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <link href="../css/style.css" rel="stylesheet"> </head>
    
    <body>
    <div id="myApp">
        <h1>事件处理器</h1>
        <input id="txtName" v-on:keyup="txtKeyup($event)">
        <button id="btnOK" v-on:click="btnClick($event)">OK</button>
    </div>
    <script>
        var myApp = new Vue({
            el: '#myApp', 
            data: {},
            methods: {
                txtKeyup: function(event){
                    this.debugLog(event);
                },
                btnClick: function(event){
                    this.debugLog(event);
                },
                debugLog:function(event){
                    console.log(
                        event.srcElement.tagName, 
                        event.srcElement.id, 
                        event.srcElement.innerHTML, 
                        event.key?event.key:""
                    );
                },
            },
        });
    </script>
    </body>
    
    </html>

转载于:https://www.cnblogs.com/Jeely/p/11057310.html

发表评论取消回复

表情：

评论列表（有 0 条评论，311人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue事件处理器

vue事件处理器事件处理的时候，v-on,监听DOM事件，在运行的时候运行js的代码。事件监听：v-on <body> <div id="

梦里梦外;/ 2022年11月21日 09:53/ 0 赞/ 176 阅读

相关 Redis的线程模型—文件事件处理器的详解

> 详细介绍了单线程Reactor模式的概念，以及Redis的线程模型—文件事件处理器的实现。文章目录 1 Reactor模式 2 文件事件处理器

刺骨的言语ヽ痛彻心扉/ 2022年08月28日 12:52/ 0 赞/ 218 阅读

相关 Qt事件与信号(一)——重新实现事件处理器

目录目录前言事件和信号使用信号与槽的方式重新实现事件处理器重新实现paintEvent函

淩亂°似流年/ 2022年06月04日 08:29/ 0 赞/ 388 阅读

相关 DOM绑定事件处理器

一介绍 DOM提供了一种事件绑定机制，它提供的事件绑定方法是addEventListener(event, function, useCapture)，该方法三个参数 e

左手的ㄟ右手/ 2022年05月12日 00:44/ 0 赞/ 215 阅读

相关 Vue.js事件处理器

事件监听： v-on指令进行事件监听。v-on需要参数，参数为事件类型。如click、change等。 1：直接操纵属性 <div id="app> <button v

桃扇骨/ 2022年05月10日 06:44/ 0 赞/ 196 阅读

相关 LayaAir 事件处理器 Handler

目录 Handler Handler.create 与 new Handler 编码示例 -------------------- Handler <tab

痛定思痛。/ 2022年03月28日 03:39/ 0 赞/ 384 阅读

相关 QT重载事件处理器

QT重载事件处理器 QEvent类是所有事件类的基类，事件类包含事件参数。 Qt的主事件回路（QApplication::exec()）从事件队列里取得本地窗口系统事件

喜欢ヅ旅行/ 2022年01月30日 12:49/ 0 赞/ 305 阅读

相关 Vue.js 事件处理器事件监听使用 v-on 指令 ,点击无反应

菜鸟教程学习 Vue 错误小结： 1.Vue.js 事件处理器，我的错误是 v-on：（这里冒号后面多了一个空格，删除就解决问题）点击无反应 ![在这里插

╰+哭是因爲堅強的太久メ/ 2021年12月10日 09:51/ 0 赞/ 344 阅读

相关事件处理器v-on:(event)/@(event)

<!DOCTYPE html> <html lang="zh"> <head> <title></title>

小灰灰/ 2021年11月14日 14:10/ 0 赞/ 312 阅读

相关 Vue-事件处理器

v-on指令计数器演示 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

谁借莪１个温暖的怀抱￠/ 2021年09月09日 08:28/ 0 赞/ 315 阅读