004_Vue按键修饰符

最新推荐文章于 2023-12-14 21:52:54 发布

自由与束缚JavaJavaScript

最新推荐文章于 2023-12-14 21:52:54 发布

阅读量187

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/122858550

版权

vue 专栏收录该内容

36 篇文章

订阅专栏

1. 按键修饰符keyup

1.1. .enter回车键

<input v-on:keyup.enter="handleSubmit" />

1.2. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>enter键的keyup事件</title>
	</head>
	<body>
		<div id="app">
			<form action="">
				<div>用户名: <input type="text" v-model="userName" /></div>
				<div>密码: <input type="password" v-model="password" v-on:keyup.enter="handleSubmit" /></div>
				<div><input type="button" @click="handleSubmit" value="登录" /></div>
			</form>
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					userName: "",
					password: ""
				},
				methods: {
					handleSubmit: function(event){
						console.log("userName = " + this.userName + ", password = " + this.password);
					}
				}
			});
		</script>
	</body>
</html>

1.3. 效果图

2. 自定义按键修饰符

2.1. 你还可以通过全局config.keyCodes对象自定义按键修饰符别名。名字可以自定义, 但是对应的值必须是按键对应event.keyCode值。

2.2. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>自定义按键修饰符</title>
	</head>
	<body>
		<div id="app">
			left: <input type="text" v-on:keyup.a='handleLeft' /> <br />
			right: <input type="text" v-on:keyup.d='handleRight' /> <br />
			up: <input type="text" v-on:keyup.w='handleUp' /> <br />
			down: <input type="text" v-on:keyup.s='handleDown' />
		</div>
		
		<script type="text/javascript" src="vue.min.js"></script>
		<script type="text/javascript">
			Vue.config.keyCodes.a = 65;
			Vue.config.keyCodes.d = 68;
			Vue.config.keyCodes.w = 87;
			Vue.config.keyCodes.s = 83;

			var vm = new Vue({
				el: "#app",
				data: {
					
				},
				methods: {
					handleLeft: function(event){
						console.log("left: " + event.keyCode);
					},
					handleRight: function(event){
						console.log("right: " + event.keyCode);
					},
					handleUp: function(event){
						console.log("up: " + event.keyCode);
					},
					handleDown: function(event){
						console.log("down: " + event.keyCode);
					}
				}
			});
		</script>
	</body>
</html>

2.3. 效果图