zoukankan      html  css  js  c++  java
  • Vue2键盘事件

    这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记,学习一下Vue键盘事件
    键盘事件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title></title>
      <script src="../js/Vue.js" charset="utf-8"></script>
      <script type="text/javascript">
        window.onload = function () {
          var vm = new Vue({
            el: '#box',
            data: {},
            methods: {
              show: function (ev) {
                alert(ev.keyCode)
              }
            }
          });
        }
      </script>
    </head>
    <body>
    <div id="box">
      <input type="text" @keydown="show($event)">
    </div>
    </body>
    </html>

    keyCode

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title></title>
      <script src="../js/Vue.js" charset="utf-8"></script>
      <script type="text/javascript">
        window.onload = function () {
          var vm = new Vue({
            el: '#box',
            data: {},
            methods: {
              show: function (ev) {
                if(ev.keyCode==13){
                  alert('你按了回车键!')
                }
              }
            }
          });
        }
      </script>
    </head>
    <body>
    <div id="box">
      <input type="text" @keyup="show($event)">
    </div>
    </body>
    </html>

    keyUp

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title></title>
      <script src="../js/Vue.js" charset="utf-8"></script>
      <script type="text/javascript">
        window.onload = function () {
          var vm = new Vue({
            el: '#box',
            data: {},
            methods: {
              show: function (ev) {
                alert(ev.keyCode)
              }
            }
          });
        }
      </script>
    </head>
    <body>
    <div id="box">
      <input type="text" @keyup="show($event)">
    </div>
    </body>
    </html>

    键盘事件——简写方式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title></title>
      <script src="../js/Vue.js" charset="utf-8"></script>
      <script type="text/javascript">
        window.onload = function () {
          var vm = new Vue({
            el: '#box',
            data: {},
            methods: {
              show: function () {
                alert('你按了回车!');
              },
              show2: function () {
                alert('你按了回车!');
              },
              show3: function () {
                alert('你按了上键!');
              },
              show4: function () {
                alert('你按了下键!');
              },
              show5: function () {
                alert('你按了左键!');
              },
              show6: function () {
                alert('你按了右键!');
              }
            }
          });
        }
      </script>
    </head>
    <body>
    <div id="box">
      <input type="text" @keyup.13="show()">
      <hr>
      <input type="text" @keyup.enter="show2()">
      <hr>
      <input type="text" @keyup.up="show3()">
      <hr>
      <input type="text" @keyup.down="show4()">
      <hr>
      <input type="text" @keyup.left="show5()">
      <hr>
      <input type="text" @keyup.right="show6()">
      <hr>
    </div>
    </body>
    </html>
  • 相关阅读:
    Apache 虚拟主机 VirtualHost 配置
    EAX、ECX、EDX、EBX寄存器的作用
    Python中文文档 目录(转载)
    八度
    POJ 3268 Silver Cow Party (最短路)
    POJ 2253 Frogger (求每条路径中最大值的最小值,Dijkstra变形)
    2013金山西山居创意游戏程序挑战赛——复赛(1) HDU 4557 非诚勿扰 HDU 4558 剑侠情缘 HDU 4559 涂色游戏 HDU 4560 我是歌手
    HDU 4549 M斐波那契数列(矩阵快速幂+欧拉定理)
    UVA 11624 Fire! (简单图论基础)
    HDU 3534 Tree (树形DP)
  • 原文地址:https://www.cnblogs.com/sxz2008/p/7040945.html
Copyright © 2011-2022 走看看