12.事件参数

事件参数

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

获取event对象

<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>

传递参数

<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>

获取列表中的内容

<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

<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