事件参数
事件参数可以获取event
对象和通过事件传递数据
获取event
对象
<template>
<button
@click="addCount">点击</button>
<p>count is: {{ count }}</p>
<p>{{ coutent_e }}</p>
</template>
<script>
export default{
data(){
return{
count:0,
coutent_e:'',
}
},
methods: {
addCount(e) {
this.coutent_e=e;
this.count++
}
}
}
</script>
当点击后触发事件:
事件传参
<template>
<h3>事件传参</h3>
<p @click="showName(name)" v-for="(name,index) in names" :key="index">{{ index+1 }}--{{name}}</p>
</template>
<script>
export default{
data(){
return{
names:["张三","李四","王五"]
}
},
methods:{
showName(name){
console.log("点击标签:"+name)
}
}
}
</script>
运行结果:
目的:点击事件进行传参
传递参数过程获取event
<template>
<h3>事件传参</h3>
<p @click="showName(name,$event)" v-for="(name,index) in names" :key="index">{{ index+1 }}--{{name}}</p>
</template>
<script>
export default{
data(){
return{
names:["张三","李四","王五"]
}
},
methods:{
showName(name,e){
console.log("点击标签:"+name+ " e: "+e)
}
}
}
</script>
运行结果: