vue学习 7键盘事件及键值修饰符

最新推荐文章于 2024-10-17 11:56:43 发布

扫地鼠Gordon

最新推荐文章于 2024-10-17 11:56:43 发布

阅读量278

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签：键值修饰符

本文链接：https://blog.youkuaiyun.com/qq_28137309/article/details/89031124

vue 专栏收录该内容

48 篇文章

订阅专栏

本文介绍如何使用Vue.js实现键盘事件监听，通过按键抬起事件结合键值修饰符（如.enter和.alt）来触发不同的功能，例如输入名字和年龄时响应特定的按键组合。

键盘事件：按键按下，按键抬起，点击等等。

键值修饰符：.enter（回车）；.alt（alt键）；可链式操作，如.alt.enter需同时按下alt键和回车

按键抬起时触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Vue.js</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <!-- vue-app是根容器 -->
    <div id="vue-app">
        <h1>键盘 Event</h1>
        <label>姓名：</label>
        <input type="text" v-on:keyup.enter="logName"><!-- 按键弹起就调用logName方法,若加入.enter,就只有回车的时候会触发 -->
        <label>年龄：</label>
        <input type="text" v-on:keyup.alt.enter="logAge"><!-- 若加入.alt.enter,就只有按住alt和回车的时候会触发 -->
    </div>
    <script src="app.js" type="text/javascript"></script>
</body>
</html>

app.js

'use strict';
// 实例化vue对象
new Vue({
    el: "#vue-app",
    data: {

    },
    methods: {
        logName: function(){
            console.log("你正在输入你的名字");
        },
        logAge: function(){
            console.log("你正在输入你的年龄");
        }
    }
});