美文网首页
$event理解

$event理解

作者: 璃安_ | 来源:发表于2022-11-05 18:15 被阅读0次
    • $event是指当前触发的是什么事件(鼠标事件,键盘事件等)

    • $event.target则指的是事件触发的目标,即哪一个元素触发了事件,这将直接获取该dom元素

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 引入库文件 -->
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <p>count的值为{{count}}</p>
            <input type="button" value="按钮" @click="add($event,1)">
        </div>
    
        <script>
            // 创建实例对象
            const app = new Vue({
                el: '#app',
                data: {
                    count: 1
                },
                methods: {
                    add (e, a) {
                        console.log(e, a);
                        this.count += a
                        console.log(this.count);
    
    
                        if (this.count % 2 === 0) {
                            e.target.style.backgroundColor = 'pink'
                        } else {
                            e.target.style.backgroundColor = 'skyblue'
    
                        }
                    }
                }
            })
        </script>
    </body>
    
    </html>
    
    image.png
    image.png
    image.png

    相关文章

      网友评论

          本文标题:$event理解

          本文链接:https://www.haomeiwen.com/subject/awjvtdtx.html