监听事件

# 监听事件

在 Vue 中可以使用 v-on 指令来监听 DOM 事件。下面是 v-on:click 监听按钮的示例：

<template>
  <div>
    <h1>你的名字:{{name}}</h1>
  <button @click="clickMe($event)">点击我</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '张三'
    }
  },
  methods: {
      clickMe(e){
        console.log(e);
        alert("你好,"+this.name+"同学");
      }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

结果展示：

简写：

<button @click="clickMe($event)">点击我</button>

总结：

在这个例子中，当用户点击按钮时，clickMe 方法会被调用，并且点击事件的详细信息会被传递给 $event 参数。在函数内部，可以通过访问 $event 的各种属性来获取关于点击事件的详细信息。

#Vue2

上次更新: 2024/05/24, 16:24:13

← 双向数据绑定事件修饰符→