Vue按键修饰符keyUp实战解析-CSDN博客

本文链接：https://blog.csdn.net/qq_43495629/article/details/121480478

这篇Vue学习笔记详细介绍了按键修饰符keyUp的使用，包括原生和Vue框架内的实现方式，并提供了案例演示及相关代码示例。

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

按键修修饰符keyUp

提示：仅供个人学习使用

文章目录

按键修修饰符keyUp
一、学习内容
二、案例演示
- 1.效果演示
- 2.相关代码
总结

一、学习内容

用了两个不同的方法来对事件修饰符keyUp进行操作，一个原生的，一个Vue里面的。

二、案例演示

1.效果演示

center

2.相关代码

代码如下（示例）：

	<!DOCTYPE html>
	<html lang="en">
	
	<head>
	    <meta charset="UTF-8">
	    <title>Title</title>
	</head>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	
	<body>
	    <div id="vm">
	        <ul>
	            <li v-for="(item,index) in myList">
	                {{item}}--索引{{index}}
	            </li>
	        </ul>
	
	        <!--@KeyUp是按键触发事件-->
	        <input type="text" @keyUp="handleKeyUp($event)" v-model="myEnter" />
	
	        <!--用了.13后就无须再判断键,这里的.13代表按键的keyCode-->
	        <input type="text" @keyUp.13="handleKeyUp1($event)" v-model="myEnter1" />
	    </div>
	
	    <script type="text/javascript">
	        var vm = new Vue({
	            el: "#vm",
	            data: {
	                myEnter: '',
	                myEnter1: '',
	                myList: [11, 222, 2333, 1111, 4444]
	            },
	            methods: {
	                //根据keyCode判断按下的键
	                handleKeyUp(ev) {
	                    console.log(ev);
	                    if (ev.keyCode === 13) {
	                        this.myList.push(this.myEnter);
	                    }
	                },
	                //用了.Enter后就无须再判断键
	                handleKeyUp1(ev) {
	                    console.log(ev);
	                    this.myList.push(this.myEnter1);
	                }
	            }
	        })
	    </script>
	
	</body>
	
	</html>