8、事件处理

最新推荐文章于 2022-12-22 07:30:00 发布

hudongdongjava

最新推荐文章于 2022-12-22 07:30:00 发布

阅读量70

点赞数

分类专栏： vue学习文章标签： vue

本文链接：https://blog.csdn.net/u012153127/article/details/111151982

版权

vue学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

事件修饰符

vue为v-on提供了事件修饰符，事件修饰符是以点为开头的指令后缀来表示的，如下

.stop
.prevent
.capture
.self
.once
.passive

示例：

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

按键码

文本框按回车键调用函数。

<body>
		<div id="app">
			<input v-on:keyup.enter="ok"/>
			<input v-on:keyup.13="ok"/>
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				"el":"#app",
				methods:{
					do
					ok:function() {
						console.log(this.value);
					}
				}
			});
		</script>
	</body>

按键码别名

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

还可以通过全局config.keyCodes对象自定义按键修饰符别名

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

hudongdongjava

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
8、事件处理

事件修饰符vue为v-on提供了事件修饰符，事件修饰符是以点为开头的指令后缀来表示的，如下.stop.prevent.capture.self.once.passive示例：<a v-on:click.stop="doThis"></a><form v-on:submit.prevent="onSubmit"></form>&lt
复制链接

扫一扫

专栏目录