Vue.js之按键修饰符的使用

cloudOnSkyline

已于 2022-07-09 16:32:23 修改

阅读量373

点赞数

分类专栏： JavaScript 文章标签： javascript vue.js

于 2022-07-09 15:27:45 首次发布

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125694114

版权

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

上文有提及事件修饰符的使用，可简化事件相关的一些操作。本文主要介绍按键修饰符的使用，可为元素绑定指定按键的键盘按下及弹起事件等。通过两个小案例来进行简单介绍

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>

cloudOnSkyline

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js之按键修饰符的使用

上文有提及事件修饰符的使用，可简化事件相关的一些操作。本文主要介绍按键修饰符的使用，可为元素绑定指定按键的键盘按下及弹起事件等。通过两个小案例来进行简单介绍案例一：用户输入用户名后，按下回车键，内容会显示在下方区域。按下backspace键，用户名会被清空核心代码：2.自定义按键修饰符案例二：在第二个输入框中，当用户输入a或A时,会弹出提示内容（1）可直接利用ASCII码值进行绑定（2）自定义按键修饰符（如下所示），再进行调用全部代码如下：......
复制链接

扫一扫

专栏目录