当前位置：首页 > article >正文

vue事件对象$event

article 2025/1/14 1:47:00

事件参数可以获取event对象和通过事件传递数据

获取 event 对象

<template>
   <h1>Hello world</h1>
   <button @click="addCount">Add</button>
   <p>{{ count }}</p>
</template>
<script>
    export default{
        data(){
            return{
                count:0
            }
        },
        methods:{
            addCount(e){
                console.log(e)
                this.count++;
            }
        }
    }
</script>

注意：vue当中的event对象，就是原生JS的Event对象。

<template>
   <h1>Hello world</h1>
   <button @click="addCount">Add</button>
   <p>{{ count }}</p>
</template>
<script>
    export default{
        data(){
            return{
                count:0
            }
        },
        methods:{
            addCount(e){
               // vue当中的event对象，就是原生JS的Event对象\
               e.target.innerHTML = "Add" + this.count
                this.count++;
            }
        }
    }
</script>

传递参数

<template>
   <h1>Hello world</h1>
   <button @click="addCount('hello')">Add</button>
   <p>{{ count }}</p>
</template>
<script>
    export default{
        data(){
            return{
                count:0
            }
        },
        methods:{
            addCount(msg){
                console.log(msg)  
                this.count++;
            }
        }
    }
</script>

<template>
   <h1>Hello world</h1>
   <p @click="getNameHandler(item)" v-for="(item,index) of names" :key="index">{{ item }}</p>
</template>
<script>
    export default{
        data(){
            return{
                names:["admin","张三","李四"]
            }
        },
        methods:{
            getNameHandler(name){
                console.log(name)
            }
        }
    }
</script>