美文网首页
2.v-on事件绑定传参的情况

2.v-on事件绑定传参的情况

作者: 最爱喝龙井 | 来源:发表于2019-10-21 22:33 被阅读0次

第一种情况,没有参数的时候,函数调用的时候可以不加小括号
第二种情况, 有参数但是调用的时候没有传入参数,并且也没有加小括号的时候,形参默认会传入事件对象event
第三种情况,当传入多个参数,并且需要传入事件对象的时候,我们需要用$event来表示事件对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 第一种情况 -->
        <button @click="btn1click">按钮1</button>
        <!-- 第二种情况 -->
        <button @click="btn2click">按钮2</button>
        <!-- 第三种情况 -->
        <button @click="btn3click('jason', $event)">按钮3</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data:{},
            methods: {
                btn1click() {
                    console.log(123)
                },
                btn2click(name) {
                    console.log(name)
                },
                btn3click(name, event) {
                    console.log(name, event)
                }
            }
        })
    </script>
</body>
</html>

相关文章

网友评论

      本文标题:2.v-on事件绑定传参的情况

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