抱歉，您的浏览器无法访问本站

v-on的事件修饰符

v-on的常见事件修饰符

v-on 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下：

• .stop 阻止冒泡。本质是调用 event.stopPropagation()。

• .prevent 阻止默认事件（默认行为）。本质是调用 event.preventDefault()。

• .capture 添加事件监听器时，使用捕获的方式（也就是说，事件采用捕获的方式，而不是采用冒泡的方式）。

• .self 只有当事件在该元素本身（比如不是子元素）触发时，才会触发回调。

• .once 事件只触发一次。

• ``.{keyCode | keyAlias}` 只当事件是从侦听器绑定的元素本身触发时，才触发回调。

• ``.native` 监听组件根元素的原生事件。

PS：一个事件，允许同时使用多个事件修饰符。

写法示范：

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

  <!-- click事件 -->
<button v-on:click="doThis"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 阻止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

.stop的举例

我们来看下面这个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46