Vue2.0学习笔记-10、键盘按键修饰符以及自定义按键修饰符

最新推荐文章于 2023-05-22 20:03:38 发布

不收藏找不到我

最新推荐文章于 2023-05-22 20:03:38 发布

阅读量298

点赞数

分类专栏： vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_41364246/article/details/109629799

版权

vue学习笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

前面我学习了几个事件修饰符，今天又学习了几个新的与键盘按键相关的事件修饰符，以及如何自定义按键修饰符。
1、按键修饰符：
在这里插入图片描述
在我去vue官网上截这张图时，我发现vue的首页不是用vue写的，xswl
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style type="text/css">
			.color{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="app">
			id:<input type="text" name="" id="" v-model="id" />
			name:<input type="text" name="" id="" v-model="name" />
			age:<input type="text" name="" id="" v-model="age" @keyup.enter="add"/>
			<button type="button" @click="add">添加</button>
			<p :class="'color'" v-for="item in list" :key="item.id"><input type="checkbox">{{item.id}},{{item.name}},{{item.age}}</p>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					id:'',
					name:'',
					age:'',
					list:[{id:1,name:'小明',age:14},{id:2,name:'李华',age:15},{id:3,name:'张三',age:18}]
			},
			methods:{
				add:function(){
					this.list.push({id:this.id,name:this.name,age:this.age});
				},
			},
			})
		</script>
	</body>
</html>

在这里插入图片描述
此时鼠标焦点在age后面的输入框中，此时点击回车键，结果如下：

2、自定义按键修饰符
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style type="text/css">
			.color{
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="app">
			id:<input type="text" name="" id="" v-model="id" />
			name:<input type="text" name="" id="" v-model="name" />
			age:<input type="text" name="" id="" v-model="age" @keyup.Q="add"/>
			<button type="button" @click="add">添加</button>
			<p :class="'color'" v-for="item in list" :key="item.id"><input type="checkbox">{{item.id}},{{item.name}},{{item.age}}</p>
		</div>
		<script type="text/javascript">
			//自定义按键修饰符
			Vue.config.keyCodes.Q = 81
			
			
			var vm=new Vue({
				el:'#app',
				data:{
					id:'',
					name:'',
					age:'',
					list:[{id:1,name:'小明',age:14},{id:2,name:'李华',age:15},{id:3,name:'张三',age:18}]
			},
			methods:{
				add:function(){
					this.list.push({id:this.id,name:this.name,age:this.age});
				},
			},
			})
		</script>
	</body>
</html>

上面的代码把回车键换成了Q键，效果相同

不收藏找不到我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2.0学习笔记-10、键盘按键修饰符以及自定义按键修饰符

前面我学习了几个事件修饰符，今天又学习了几个新的与键盘按键相关的事件修饰符，以及如何自定义按键修饰符。1、按键修饰符：在我去vue官网上截这张图时，我发现vue的首页不是用vue写的，xswl示例：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.jsdelivr.net
复制链接

扫一扫