22-Vue之按键修饰符

最新推荐文章于 2024-04-04 10:59:21 发布

爱学习de测试小白

最新推荐文章于 2024-04-04 10:59:21 发布

阅读量496

点赞数

分类专栏： # Vue 文章标签： vue.js javascript 前端

-- 来着爱学习de测试小白

本文链接：https://blog.csdn.net/IT_heima/article/details/128055143

版权

Vue 专栏收录该内容

41 篇文章 5 订阅

订阅专栏

按键修饰符

前言

本篇来学习下vue中如何使用按键修饰符

esc

键盘esc键触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按键修饰符</title>
</head>
<body>
<div id="app">
    <p>{{message}}</p>
    <!--    esc按键触发-->
    <input type="text" @keyup.esc="clearInput">
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    // 创建vue的实例对象
    const app = new Vue({
        // el 属性是固定写法，表示当前vue实例要控制页面上的哪个区域，接收的值是一个选择器
        el: '#app',
        // data对象是要渲染页面上的数据
        data: {
            message: '按键修饰符学习！'
        },
        methods: {
            // 事件对象e
            clearInput(e) {
                console.log('esc键触发')
                // 打印事件对象
                console.log(e)
                // 赋值为''
                e.target.value = ''
            }         
        }
    });
</script>


</body>
</html>

在这里插入图片描述

enter

键盘enter键触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按键修饰符</title>
</head>
<body>
<div id="app">
    <p>{{message}}</p>
    <!--    esc按键触发-->
    <input type="text" @keyup.esc="clearInput" @keyup.enter="commitAjax">
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    // 创建vue的实例对象
    const app = new Vue({
        // el 属性是固定写法，表示当前vue实例要控制页面上的哪个区域，接收的值是一个选择器
        el: '#app',
        // data对象是要渲染页面上的数据
        data: {
            message: '按键修饰符学习！'
        },
        methods: {
            // 事件对象e
            clearInput(e) {
                console.log('esc键触发')
                // 打印事件对象
                console.log(e)
                // 赋值为''
                e.target.value = ''
            },
            commitAjax() {
                console.log('enter键触发')
            }
        }
    });
</script>

</body>
</html>