Vue 3 事件处理

事件处理

实验介绍

页面上会有很多的页面交互,例如用户点击按钮,会触发什么样的事件,这个事件要做什么事情,就会涉及到事件处理。

事件监听

我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件,并在触发事件时执行一些 JavaScript。用法为 v-on:click=”methodName 或使用快捷方式 @click="methodName",然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称。

<template>
  <div class="template-m-wrap">
    <button @click="count">{
   {counter}}</button>
  </div>
</template>
<script>
export default {
  name: "TemplateM",
  data() {
    return {
      counter: 0
    };
  },
  methods: {
    count() {
      this.counter++
    }
  }
};
</script>
 

查看效果如下:

05-08 1910
05-06 2122
实付 79.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值