P9. vue3 事件处理

<script>
export default {
  data() {
    return {
      counter: 0,


    };
  },
  methods:{
    addCounter:function (number){
      this.counter+=number
    }

  }
};
</script>

<template>
  <div>
    <!-- 绑定事件，js -->
    <h2 @click="counter++">{{counter}}</h2>
    <!--绑定事件，methods，没有传递参数 -->
    <h2 @click="addCounter">{{counter}}</h2>
    <!--绑定事件，methods，传递参数 -->
    <h2 @click="addCounter(2)">{{counter}}</h2>

  </div>
</template>

<style>

</style>

绑定事件既有参数传递也有事件对象

<script>
export default {
  data() {
    return {
      counter: 0,
      age:18,

    };
  },
  methods:{
    addCounter:function (number, e){
      this.counter +=number;
      console.log()
    },
    addAge(){
      this.age++
    }

  },
};
</script>

<template>
  <div>
    <!-- 绑定事件，js -->
    <h2 @click="counter++">{{counter}}</h2>
    <!--绑定事件，methods，没有传递参数 -->
    <h2 @click="addCounter">{{counter}}</h2>
    <!--绑定事件，methods，传递参数 -->
    <h2 @click="addCounter(2)">{{counter}}</h2>
    <!-- 绑定事件既有参数传递也有事件对象 -->
    <h2 @click="addCounter(5, $event)">{{counter}}</h2>
    <!-- 一个事件绑定多个函数 -->
    <h2 @click="addCounter(5), addAge()">{{counter}}---{{age}}</h2>

  </div>
</template>

<style>

</style>