Vue事件执行参数

一.概念

<template>
    <div id="event">
        <!-- 事件的执行参数 类似原生js的 -->
        <button @click="handle">按钮</button>
    </div>
</template>

<script>
export default{
   
    name:"Event",
    methods:{
   
        handle(){
   
            //事件执行参数可以使用原生的

			//没有传递参数时，可以这么绑定event
            let event=window.event;  
            console.log(event);
            
            //触发的当前目标元素(button)
            console.log(event.target);
            //event.srcElement
            //event.toElement
        }
    }
}
</script>

传递参数时。可以用$event绑定event

<template>
    <div id="event">
        <!-- 事件的执行参数 类似原生js的 -->
        <button @click="handle(1,$event)">按钮</button>
    </div>
</template>

<script>
export default{
   
    name:"Event",
    methods:{
   
        handle(index,e){
   
            //当前事件执行函数没有参数传递参数时,默认的第一个参数就是event
            // console.log(e);    //MouseEvent
            //传递参数时找不到event
            //传递参数时  怎么找event    
            //在方法上传递参数  $event  指的就是event
            console.log(index,e);   
            
        }
    }
}
</script>

二.案例

1.文本框， 单选复选框

<template>
    <div id="formInfo">
        <form action="" method="get" @submit.prevent="subInfo">
            <ul>
                <li>
                    <label for="username">姓名:</label>
                    <input type="text" id="username" v