上文有提及事件修饰符的使用,可简化事件相关的一些操作。本文主要介绍按键修饰符的使用,可为元素绑定指定按键的键盘按下及弹起事件等。通过两个小案例来进行简单介绍
1.指定的按键修饰符
案例一:用户输入用户名后,按下回车键,内容会显示在下方区域。按下backspace键,用户名会被清空
核心代码:
<div><span>用户名: </span><input type="text" v-model='uname' @keyup.enter='inputName()' @keyup.delete='deleteName()'></div>
</div>
2.自定义按键修饰符
案例二:在第二个输入框中,当用户输入a或A时,会弹出提示内容
(1)可直接利用ASCII码值进行绑定
(2)自定义按键修饰符(如下所示),再进行调用
Vue.config.keyCodes.a = 65;
全部代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- delete对应键盘上的backspace键 -->
<div><span>用户名: </span><input type="text" v-model='uname' @keyup.enter='inputName()' @keyup.delete='deleteName()'></div>
</div>
<div><span>输入的名字是:</span><span class="nameArea"></span> </div>
<div class="app1">
<div>
<input type="text" @keyup.a="alert('输入了a')" v-model="app1Data">
</div>
</div>
<script src="./vue.min.js"></script>
<script>
var input = document.querySelector('input');
var nameArea = document.querySelector('.nameArea')
// 不能随便自定义按键修饰符,只能取a,A,或者连续的a(以a按键为例)。实际上可以直接使用ASCII值进行绑定
Vue.config.keyCodes.a = 65;
var vm1 = new Vue({
el: '#app',
data: {
uname: ''
},
methods: {
inputName() {
nameArea.innerHTML = this.uname;
},
deleteName() {
this.uname = '';
}
}
})
var vm2 = new Vue({
el: '.app1',
data: {
app1Data: '2'
},
methods: {}
})
</script>
</body>
</html>