事件参数

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

获取event对象

xxxxxxxxxx
<template>
    <button @click="addCount">Add</button>
    <p>Count is: {{ count }}</p>
</template>
<script>
export default {
    data() {
        return {
            count:0
        }
    },
    methods:{
        addCount(e){
            e.target.innerHTML = "Add" + this.count
            this.count+=1
        }
    }
}
</script>

传递参数

xxxxxxxxxx
<template>
    <button @click="addCount('hello')">Add</button>
    <p>Count is: {{ count }}</p>
</template>
<script>
export default {
    data() {
        return {
            count:0
        }
    },
    methods:{
        addCount(message){
            console.log(message);
            this.count+=1
        }
    }
}
</script>

获取列表中的内容

xxxxxxxxxx
<template>
    <p @click="getNameHandle(item)" v-for="(item,index) in names" :key="index">{{ item }}</p>
</template>
<script>
export default {
    data() {
        return {
            names:["iwen","ime","frank"]
        }
    },
    methods:{
        getNameHandle(name){
            console.log(name);
        }
    }
}
</script>

传递参数过程中获取event

xxxxxxxxxx
<template>
    <p @click="getNameHandle(item,$event)" v-for="(item,index) in names" :key="index">{{ item }}</p>
</template>
<script>
export default {
    data() {
        return {
            names:["iwen","ime","frank"]
        }
    },
    methods:{
        getNameHandle(name,e){
            console.log(name,e);
        }
    }
}
</script>

实时效果反馈

1. 在Vue中，传递参数过程中获取event对象，写法正确的是：

A @click="getNameHandle(item)"

B @click="getNameHandle(item,$event)"

C @click="getNameHandle($event,item)"

D @click="getNameHandle()"

答案

1=>B