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>
  • 相关阅读:
    STL中set求交集、并集、差集的方法
    Vijos 1308 埃及分数(迭代加深搜索)
    POJ 1161 Walls(Floyd , 建图)
    UVa 1601 万圣节后的早晨
    dp之完全背包
    dp之取数字问题
    dp之最长公共子序列
    枚举排列
    poj 3187 暴力枚举
    poj 2431 优先队列,贪心
  • 原文地址:https://www.cnblogs.com/sxz2008/p/7040945.html
Copyright © 2011-2022 走看看