06.v-on参数问题 

<body>
    <div id="app">
        <!-- 事件调用的方法没有参数 小括号可以省略 -->
        <button @click="btnClick()">导航1</button>
        <button @click="btnClick">导航2</button>

        <!-- 在事件定义时。写方法时省略小括号  但是方法本身需要一个参数  
            这时候 Vue会默认把浏览器生成的event事件对象 传入方法 -->
        <button @click="btnClick2">导航3</button>

        <!-- 定义方法时 需要event对象 也需要传其他参数  直接写 event会报错 因为会被以为时一个变量
        去data里面找 没找到定义的变量就报错了  所以要传event对象 应该在在前面加$  $event -->
        <button @click="btnClick3(abc,$event)">导航4</button>

        <!-- 或者形参和实参 都写一个参数 打印的时候写形参 和 event 也可以得到event对象和实参 -->
        <button @click="btnClick5(abc)">导航5</button>
    </div>
    <script src='https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js'></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                abc: "李银河~你好啊"
            },
            methods: {
                btnClick() {
                    console.log("click");
                },
                btnClick2(num) {
                    console.log("-------", num);
                },
                btnClick3(abc, event) {
                    console.log("+++++", abc, event);
                },
                btnClick5(abc) {
                    console.log("~~~~~~", abc, event);
                }
            }
        })
    </script>
</body>

 

posted @ 2020-12-28 21:31  闭上耳朵  阅读(104)  评论(0)    收藏  举报