Vue中按钮修饰符

最新推荐文章于 2024-07-04 10:21:44 发布

碧山云游

最新推荐文章于 2024-07-04 10:21:44 发布

阅读量185

点赞数

分类专栏： Vue.js学习笔记

本文链接：https://blog.csdn.net/qq_41617901/article/details/116402802

版权

Vue.js 按键修饰符 keyup事件自定义按键表单处理

关键词由CSDN通过智能技术生成

Vue.js学习笔记专栏收录该内容

21 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按钮修饰符</title>
	</head>
	<body>
		<script src="js/vue.js" charset="UTF-8"></script>
		<div id="box">
			<form action="#" method="post">
				用户名：<input type="text" v-model="username" v-on:keyup.delete='delUserName'/>
				密码:<input type='password' v-model="pwd" v-on:keyup.enter='btnSubmit'/>
				<input type="button" value="提交" v-on:click="btnSubmit"/>
			</form>
			<!-- 自定义按键修饰符 -->
		    <input type="text" v-on:keyup.aa="keyHandle" />
		</div>
		<script type="text/javascript">
			Vue.config.keyCodes.aa=65;
			new Vue(
			{
				el:'#box',
				data:{
					username:'',
					pwd:'',
					msg:''
				},
				methods:{
					btnSubmit:function(){
						console.log(this.username,this.pwd);
					},
					delUserName:function(){
						this.username='';
					},
					keyHandle:function(e){
									console.log(e.keyCode);
									console.log('111');
								}
				}
			}
			)
		</script>
	</body>
</html>