其他分享
首页 > 其他分享> > vue 中 事件绑定事件-参数传递 且v-onclick的使用

vue 中 事件绑定事件-参数传递 且v-onclick的使用

作者：互联网

<!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>
</head>
<body>
    <div id="app">
        <!-- 绑定点击事件 -->
        <!-- 写法一 -->
        <button v-on:click="handlde1($event)">点击1</button>
        <!-- 写法二 -->
        <button @click="handlde2(123,456,$event)">点击2</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        /*
        事件绑定事件-参数传递
        1.如果事件直接绑定函数名称，那么默认会传递事件对此昂作为事件函数的第一个参数
        2.如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对
        象的名称必须是$event
        <button v-on:click="handlde1($event)">点击1</button>
        ||相当于
        <button v-on:click="handlde1">点击1</button>
        
        */
       
        new Vue({
            el:'#app',
            data:{
                num:0
            },
            methods:{
                handlde2:function(p,p1,event){
                    console.log(p,p1);
                    console.log(event.target.innerHTML)
                },
                handlde1:function(event){
                    console.log(event.target.innerHTML)
                }
            }
        })
    </script>
</body>
</html>

 

标签：vue,console,log,绑定,点击,事件,onclick,event
来源： https://www.cnblogs.com/jq-growup/p/15932352.html