zoukankan      html  css  js  c++  java
  • vue的事件绑定

        <div id="oop">
            <button v-on:click.stop="hander">点击</button>                          //stop: 阻止冒泡(修饰符)
            <button v-on:click="hander(123,456,$event)">点击2</button>
            <button @click="hander1">点击1</button>
            <a href="http://www.baidu.com" v-on:click.prevent="handle">跳转</a>     //prevent:阻止默认行为(修饰符)   禁止跳转
            <!-- 
                事件绑定-参数传递
                1.如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数
                2.如果事件绑定函数调用,那么事件对象必须作为最后一个参数显示传递,并且事件对象的名称必须是$event
             -->
        </div>
    
        <script src="./node_modules/vue/dist/vue.js"></script>
        <script type="text/javascript">
            var nn = new Vue({
                el: "#oop",
                data: {                                       
                    num: 0
                },
                methods: {
                    hander: function (num, oo, event) {
                        console.log(num, oo, event)
                        console.log(event.target.tagName)
                        console.log(this === nn)                 //true
                        this.num++;
                    },
                    hander1: function (event) {
                        console.log(event.target.tagName)
                        this.num--;
                    },
                }
            })
    
        </script>
  • 相关阅读:
    收藏文章
    Python __func__
    Python 可变对象 & 不可变对象
    Kafka SASL ACL配置踩坑总结
    C++ 传递动态内存
    负数取反,单目运算“-”的运算
    C++重载运算符的理解
    c++ 随机函数用法
    static变量
    路由汇聚及其相关计算
  • 原文地址:https://www.cnblogs.com/wsm777/p/13578553.html
Copyright © 2011-2022 走看看