vue中的按键修饰符

最新推荐文章于 2024-02-21 00:27:12 发布

洛洛大芳

最新推荐文章于 2024-02-21 00:27:12 发布

阅读量131

点赞数

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

本文链接：https://blog.csdn.net/DYFNB/article/details/119547355

版权

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

12 篇文章 0 订阅

订阅专栏

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：这是一个键盘事件,修饰符为enter,按下enter键后会触发这个事件

<input v-on:keyup.enter="submit">

使用 keyCode attribute 也是允许的：不过已经被淘汰了了解一下就行了

<input v-on:keyup.13="submit">

你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

Vue.config.keyCodes.f1 = 112

以下是我使用的过程

<!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>按键修饰符</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="vueDiv">
        <!-- 事件都可以用v-on绑定,绑定键盘事件keyup,只有当按下enter键的时候才会触发事件 -->
        <!-- 更多按键修饰符参考文档 -->
        <button v-on:keyup.enter="submit()">提交</button>
        <button v-on:keyup.page-down="pageDown()">pageDown</button>
    </div>
</body>
<script>
    new Vue({
        el:"#vueDiv",
        data() {
            return {
                msg:"按键修饰符"
            }
        },
        methods: {
            submit:function(){
                alert(this.msg);
            },
            pageDown:function(){
                alert("pageDown");
            }
        },
    })
</script>
</html>

洛洛大芳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中的按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：这是一个键盘事件,修饰符为enter,按下enter键后会触发这个事件<input v-on:keyup.enter="submit">使用 keyCode attribute 也是允许的：不过已经被淘汰了了解一下就行了<input v-on:keyup.13="submit">你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：V.
复制链接

扫一扫