• Vue--按键修饰符(逐个学习按键修饰符)


    在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符:

    1 <!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
    2 <input v-on:keyup.13="submit">

    记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:

    1 <!-- 同上 -->
    2 <input v-on:keyup.enter="submit">
    3 
    4 <!-- 缩写语法 -->
    5 <input @keyup.enter="submit">

    全部的按键别名:

    • .enter
    • .tab
    • .delete (捕获“删除”和“退格”键)
    • .esc
    • .space(空格键)
    • .up
    • .down
    • .left
    • .right

    我们也可以自定义按键

     1 <html>
     2   <head>
     3     <title>Vue按键修饰符</title>
     4     <script src="vue.js"></script>
     5     <style type="text/css">
     6     </style>
     7   </head>
     8   <body>
     9    <div id="example">
    10       <ul>
    11         <li v-for="item in items">
    12           {{ item.name }}
    13         </li>
    14       </ul>
    15       <button @keyup.f1="del()">删除</button>
    16    </div>
    17    <script>
    18      Vue.config.keyCodes.f1 = 112;
    19      new Vue({
    20        el:"#example",
    21        data:{
    22          items:[
    23            {name:"Hello"},
    24            {name:"world"},
    25            {name:"喜欢"},
    26            {name:"happy"}
    27          ]
    28        },
    29        methods:{
    30          del(){
    31             this.items.pop();
    32          }
    33        }
    34      })
    35    </script>

    甚至可以这样添加多个

    1 Vue.config.keyCodes = {
    2     f1:112,
    // 可以添加多个
    3 ............ 4 ............ 5 ............ 6 7 8
  • 相关阅读:
    JS 日期加多少天,减多少天
    SQL 触发器
    SGU100
    连续子数组的最大和
    字符串的排列
    二叉搜索树与双向链表
    数组中出现次数超过一半的数字
    复杂链表的复制
    二叉树中和为某一值的路径
    二叉搜索树的后序遍历序列
  • 原文地址:https://www.cnblogs.com/qjuly/p/8630411.html
Copyright © 2020-2023  润新知