【星海出品】VUE（四）-CSDN博客

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

事件处理
事件内联JS语句类似于onclick
方法事件处理器一个指向组件上定义的方法的属性名或是路径。

App.vue关闭掉了所以就要重新运行一下。

<template>
    <h3>event demo</h3>
    <button @click="count++"> Sadd </button>
    <button @click="addCount"> Fadd </button>
    <p> {{ count }} </p>
</template>

<script>
export default{
  data(){
      return{
          msg: "Event",
          count: 0
      }
  },
  methods:{
      addCount(){
        this.count += 1
      }
  }
}
</script>

dblclick #双击
click #单机

函数传参

<template>
    <h3>event demo</h3>
    <button @dblclick="count++"> Sadd </button>
    <!-- <button @click="addCount"> Fadd </button> -->
    <button @click="etest('hello')">ADD</button>
    <p> {{ count }} </p>
</template>

<script>
export default{
  data(){
      return{
          msg: "Event",
          count: 0
      }
  },
  methods:{
      etest: function (param1) {
          console.log("pa: ");
          console.log(param1);
          this.count += 1;
      }
  }
}
</script>

v-for item传递参数

<template>
    <h3>event demo</h3>
    <button @dblclick="count++"> Sadd </button>
    <!-- <button @click="addCount"> Fadd </button> -->
    <button @click="etest('hello')">ADD</button>
    <p> {{ count }} </p>
    <h2> event </h2>
    <p @click="getNameHandler(item)" v-for="(item,index) of names" :key="index"> {{ item }} </p>
</template>

<script>
export default{
  data(){
      return{
          msg: "Event",
          count: 0,
          names:["wang","zhao","qian"]
      }
  },
  methods:{
      etest: function (param1) {
          console.log("pa: ");
          console.log(param1);
          this.count += 1;
      },
      getNameHandler: function (paam1) {
          console.log(paam1);
      },
  }
}
</script>