22-Vue之按键修饰符

按键修饰符

      • 前言
      • esc
      • enter


前言

  • 本篇来学习下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>
    
    <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>

22-Vue之按键修饰符_第1张图片

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>
    
    <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>

22-Vue之按键修饰符_第2张图片

你可能感兴趣的:(#,Vue,vue.js,javascript,前端)