zoukankan      html  css  js  c++  java
  • 转载vue键盘事件

     

    这两天学习了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>
  • 相关阅读:
    容器跨主机网络通信学习笔记(以Flannel为例)
    Kubernetes控制器Job和CronJob
    记一次使用Flannel插件排错历程
    Kubernetes控制器Deployment
    Kubernetes如何通过StatefulSet支持有状态应用?
    react18 来了,我 get 到...
    gojs 实用高级用法
    vuecli3 vue2 保留 webpack 支持 vite 成功实践
    calibre 报错 This application failed to start because no Qt platform plugin could be initialized. Reinstalling the application may fix this problem. 解决
    unable to recognize "*.yaml": no matches for kind "RoleBinding" in version "rbac.authorization.k8s.io/v1beta1"
  • 原文地址:https://www.cnblogs.com/hdg-caiqi/p/8931838.html
Copyright © 2011-2022 走看看