【v-on】一个元素绑定多个事件以及一个事件绑定多个函数的两种写法

时间：2025-03-18 22:18:52

本文代码主要讲述了v-on绑定事件函数传参，一个元素绑定多个事件的两种写法，一个事件绑定多个函数的两种写法，修饰符的使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div >
        <!-- <button v-on:click="myclick('hello','world','你好世界',$event)"  >button1</button> -->
        <button @click="myclick('hello','world','你好世界',$event)">点我text</button>
        
        <!-- v-on绑定多个事件教程里这样子写，但是貌似已经不支持这样子的写法了，内联方式下事件处理器只能绑定一个方法，要是想要绑定多个事件，用下面第二行的方式-->
        <!-- <button v-on="{mouseenter: onEnter,mouseleave: onLeave}">鼠标进来</button> -->
        <button @mouseenter="onEnter" @mouseleave="onLeave">鼠标进来</button>

        <!-- 一个事件绑定多个函数，按顺序执行，这里分隔函数可以用逗号也可以用分号-->
        <button @click="a(),b()">点我ab</button>
        <button @click="one()">点我onetwothree</button>

        <!-- v-on修饰符  .stop .prevent .capture .self 以及指定按键.{keyCode|keyAlias} -->
        <!-- 这里的.stop 和 .prevent也可以通过传入&event进行操作 -->
        <!-- 全部按键别名有：enter tab delete esc space up down left right -->
        <form @="onKeyup" @="onSubmit">
            <input type="text" placeholder="在这里按delete">
            <button type="submit">点我提交</button>
        </form>

    </div>
    
    <script src=""></script>
    <script>
        var vm = new Vue({
            el:"#app",
            methods:{
                //这里是es6对象里函数写法
                a(){("a");},
                b(){("b");},
                one(){
                    ("one");
                    ();
                    ();
                },
                two(){
                    ("two");
                },
                three(){
                    ("three");
                },
                myclick(msg1,msg2,msg3,event){
                    (msg1+msg2+"--"+msg3);
                    (event);
                },
                onKeyup(){
                    ("you press 'delete'");
                },
                onSubmit(){
                    ("sumited");
                },
                onEnter(){
                    ("mouse enter");
                },
                onLeave(){
                    ("mouse leave");
                }
            }
        });
    </script>
</body>
</html>

 

相关文章