vue.js 重学笔记(9) -- keyup.enter .tab .esc space键盘事件处理技巧

本文链接：https://blog.youkuaiyun.com/weixin_39553363/article/details/109177554

背景
如何监听用户输完文本时按下键盘回车键？

可以在vue使用v-on监听键盘事件的时候添加按键修饰符

	<body>
	    <div id="app">         
		  <input    v-on:keyup.enter="submit" />
		</div>
	   <script type="text/javascript">
	      let vm=new Vue({
			  el:'#app',	
			 data:{	           
			 },
			 methods:{
				 submit:function(value){
					console.log("哟哟");
				 },
		
			 }
			
		  });
		  
		  

	   </script>

当用户输完文本的时候，只有按下enter键的时候，控制台才会输出"哟哟"。

以下是常见的按键修饰符

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

问题：如何监听按下其他键，如a键？

解决方法，除了用相应的单词，我们可以参考键盘键值表

在这里插入图片描述
根据键值表的值，我们可以看到此时a对应的简直是65，因此，我们可以将enter该为65

	<body>
	    <div id="app">         
	        <!-- 此处修改-->
		  <input    v-on:keyup.65="submit" />
		</div>
	   <script type="text/javascript">
	      let vm=new Vue({
			  el:'#app',	
			 data:{	           
			 },
			 methods:{
				 submit:function(value){
					console.log("哟哟");
				 },
		
			 }
			
		  });
		  
		  

	   </script>