Vue中的按键修饰符

最新推荐文章于 2025-07-06 16:16:07 发布

百日梦想家

最新推荐文章于 2025-07-06 16:16:07 发布

阅读量804

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/qq_42418169/article/details/108054411

vue 专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍Vue.js中按键修饰符的使用方法，包括官方预设的按键修饰符如.enter、.tab等，以及如何自定义按键修饰符，通过实例演示了如何在输入框中使用.v-on:keyup.enter来响应Enter键的按下。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

按键修饰符

使用

<input v-on:keyup.[修饰符名称]="submit">

官方提供的类型

名称
.enter
.tab
.delete （同时捕获删除键和退格键）
.space
.up
.down
.left
.right

自定义按键修饰符

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

案例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>default</title>
	<script src="../js/Vue2.6.11.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" name="" id="" v-model="content" v-on:keyup.enter="fun(content)" />
		</div>
		
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					content:''
				},
				methods:{
					fun:function(data){
						console.log('录入'+data)
						this.content=''
					}
				}
			});
		</script>
	</body>
</html>