这两天学习了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>

Vue2键盘事件的更多相关文章

  1. Vue2键盘事件：keydown/keyup...

    Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...

  2. Vue2学习笔记:键盘事件

    Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...

  3. Vue 键盘事件

    Vue2键盘事件:keydown/keyup... 1.使用 <!DOCTYPE html> <html> <head> <title></tit ...

  4. vue学习笔记（一）关于事件冒泡和键盘事件 以及与Angular的区别

    一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...

  5. 关于事件冒泡和键盘事件 以及与Angular的区别

    一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...

  6. html中键盘事件----在路上（16）

    键盘事件,这里以onkeyup为例: 解析:当在一个input中输入文本时,在另一个div中输出文本 在下面是本人写的小demo,供分享. 代码如下: <!DOCTYPE html> &l ...

  7. js键盘事件和焦点事件

    键盘事件onkeydown //当键盘按下的时候触发onkeyup //但键盘抬起的时候触发event.keyCode //数字类型 键盘按键的键值功能键 ctrlkey shiftkey altke ...

  8. 深入理解DOM事件类型系列第二篇——键盘事件

    × 目录 [1]类型 [2]顺序 [3]按键信息[4]应用 前面的话 鼠标和键盘是电脑端主要的输入设备,上篇介绍了鼠标事件,本文将详细介绍键盘事件 类型 键盘事件用来描述键盘行为,主要有keydown ...

  9. jquery键盘事件总结

    在工作中在发现同事在写输入密码按键的相关js效果时,发现自己对于这块很是不了解,这几天特地了解了一下,进行以下总结: 一.首先要知道键盘事件的几个属性: 1.keydown():在键盘按下时触发. 2 ...

随机推荐

  1. Swift3 CADisplayLink简单用法

    1.定义属性 var displayLinkTimer:CADisplayLink? = nil 2.init displayLinkTimer = CADisplayLink(target: sel ...

  2. Swift3.0 - 实现剪切板代码拷贝及跨应用粘贴

    有个需求,点击某个按钮,实现一段内容的拷贝,然后到其他应用内,直接长按粘贴. 实现如下: /// 测试剪切板,实现代码拷贝内容 func testPasteBoard(str:String) { // ...

  3. RS：关于协同过滤，矩阵分解，LFM隐语义模型三者的区别

    项亮老师在其所著的<推荐系统实战>中写道: 第2章 利用用户行为数据 2.2.2 用户活跃度和物品流行度的关系 [仅仅基于用户行为数据设计的推荐算法一般称为协同过滤算法.学术界对协同过滤算 ...

  4. 聊聊阻塞与非阻塞、同步与异步、I/O模型

    1. 概念理解 在进行网络编程时,我们常常见到同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调用方式: 同步/异步主要针对C端:  同步: 所谓同步,就是在c端 ...

  5. List<String> bikeList = Arrays.asList(bikeuuids);

    最近项目中  List<String> bikeList = Arrays.asList(bikeuuids);报错 而且console里面没有特别有用的 bikeList.add(&qu ...

  6. Ubuntu菜鸟入门（十五）—— 安装aras2下载软件

    一.安装arias2 sudo add-apt-repository ppa:t-tujikawa/ppa sudo apt-get update sudo apt-get install aria2 ...

  7. k8s之Service

    一.概述 在k8s中暴露Service访问(无论内部还是外部),都要经过kube-proxy: 如下图:

  8. C# Random 生成不重复随机数

    命名空间:System 表示伪随机数生成器,一种能够产生满足某些随机性统计要求的数字序列的设备. 伪随机数是以相同的概率从一组有限的数字中选取的.所选数字并不具有完全的随机性,因为它们是用一种确定的数 ...

  9. You've implemented -[<UIApplicationDelegate> application:didReceiveRemoteNotification:fetchCompletionHandler:], but you still need to add "remote-notification" to the list of your supported UIBackgrou

    最近有个同事问我,他工程运行时就会有如下提示,但是不影响功能:You've implemented -[<UIApplicationDelegate> application:didRec ...

  10. php封装数据库函数

    从Thinkphp里面抽离出来的数据库模块,感觉挺好用 common.php <?PHP /** * 通用函数 */ //包含配置文件 if (is_file("config.php& ...