vue按键修饰符的使用监听键盘事件的实现

最新推荐文章于 2022-11-17 09:49:31 发布

头发多多程序媛

最新推荐文章于 2022-11-17 09:49:31 发布

阅读量466

点赞数 3

分类专栏： vue 笔记文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_46816740/article/details/108849888

版权

笔记同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

vue

14 篇文章 0 订阅

订阅专栏

有没有很疑惑每次按回车输入便会被监听到是怎么实现的?
键盘按下回车,被监听到并弹出消息框提示代码实现示例:(以及别的键盘事件补充)
输入框绑定事件@keyup @mousedown为鼠标事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按键修饰符</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input @keyup.enter="foo" type="text">
        <br>
        <input @keyup.ctrl.67="foo1" type="text">
        <br>
        <input @mousedown.left="foo2" type="text">
    </div>
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{},
        methods:{
            foo(){
                alert("回车键被按下-抬起")
            },
            foo1(){
                alert("ctrl+c键被按下-抬起")
            },
            foo2(){
                alert("鼠标左键点击")
            }
        },
    })
</script>
</html>