• vue-按键修饰符

    按键修饰符：主要用于监听键盘上的按钮被按下时，可触发对应的事件函数

                v-on:keyup.修饰符.修饰符】、

                .enter

                .tab

                .delete(针对delete和backspace两个按键)

                .esc

                .space

                .esc

                .space

                .up

                .down

                .left

                .right

                系统修饰符必须按下才触发

                .ctrl

                .alt

                .shift

                .meta:mac针对的是command键盘，windows针对的windows键盘（田）

    例子代码如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>v-on事件处理指令title>
    7. head>
    8. <body>
    9.     
    10.     <div id="app">
    11.         
    12.         <button v-on:click="say">v-on绑定的时间按钮：{{msg}}button>
    13.         
    14.         <button @click="say(123)">简写@绑定的事件按钮：{{msg}}button>
    15.         
    16.         <button @click="doLog('牛逼',$event)">手动传递DOM事件对象button>
    17.  
    18.         <input @blur="doBlur">
    19.         
    20.         <h3>事件修饰符h3>
    21.         <div @click="todo">
    22.             <div @click.stop="doThis">
    23.                 单机事件会继续传递
    24.             div>
    25.         div>
    26.         <br>
    27.         
    28.         <a href="http://www.baidu.com" @click="doStop">默认跳转a>
    29.         <br>
    30.         
    31.         <a href="http://www.baidu.com" @click.prevent="doStop">.prevent修饰符-跳转a>
    32.         <br>
    33.  
    34.         <button @click="doOnly1">点击事件每次加一{{num1}}button>
    35.         <br>
    36.         <button @click.once="doOnly">.once修饰符，点击事件只触发一次{{num}}button>
    37.         
    38.             <h3>按键修饰符h3>
    39.             <input v-on:keyup.enter="keyEnter" placeholder="监听回车（enter）事件">
    40.             <input v-on:keyup.delete="keyDelete" placeholder="监听删除（针对delete和backspace两个按键）">
    41.             
    42.             <input @keyup.alt.enter="altEnter" placeholder="监听Alt + center">
    43.             <div @click.ctrl="clickCtrl">Ctrl+点击事件div>
    44.             <input @keyup.meta.delete="mdt" placeholder="监听田 + delete或backspace两个按键">
    45.  
    46.             <input @keyup.ctrl.shift.x="ctrlShiftx" placeholder="ctrlShiftx">
    47.     div>
    48.  
    49.     
    50.  
    51.    
    52.     <script src="./node_modules/vue/dist/vue.global.js">script>
    53.     <script type="text/javascript">
    54.         const {createApp} = Vue;
    55.         const app=createApp({
    56.             data(){
    57.                 return{
    58.                     msg:"aaa",
    59.                     num:0,
    60.                     num1:0
    61.                 }
    62.             },
    63.             //定义方法的选项
    64.             methods: {
    65.                 say(event){//event 事件对象
    66.                     this.msg="5555"; //this 代表app对象
    67.                     console.log("say something!",event);
    68.                 },//多个必须加逗号
    69.                 doLog(name,event){
    70.                     console.log(name,event);
    71.                 },
    72.                 doBlur(event){
    73.                     console.log('输入框失去焦点',event.target.value); //获取输入框值
    74.                 },
    75.                 doThis(event){
    76.                     console.log("doThis");
    77.                 },
    78.                 todo(event){
    79.                     console.log("todo");
    80.                 },
    81.                 doStop(){
    82.                     alert("doStop!");
    83.                 },
    84.                 doOnly1(){
    85.                     this.num1++;
    86.                     console.log("doOnly1");
    87.                 },
    88.                 doOnly(){
    89.                     this.num++;
    90.                     console.log("doOnly");
    91.                 },
    92.                 keyEnter(){
    93.                     console.log("监听enter按键");
    94.                 },
    95.                 keyDelete(event){
    96.                     console.log("监听delete和backspace两个按键按键",event.keyCode);
    97.                 },
    98.                 altEnter(event){
    99.                     console.log("监听alt和Enter两个组合按键",event.keyCode);
    100.                 },
    101.                 clickCtrl(){
    102.                     console.log("监听clickCtrl",event.keyCode);
    103.                 },
    104.                 mdt(){
    105.                     console.log("监听田 + delete或backspace两个按键",event.keyCode);
    106.                 },
    107.                 ctrlShiftx(){
    108.                     console.log("ctrlShiftx",event.keyCode);
    109.                 }
    110.             }
    111.         }).mount("#app");
    112.         console.log("app",app);
    113.     script>
    114.     
    115. body>
    116. html>

  • 相关阅读:
    MongoDB打破了原则引入SQL？
    Chrome浏览器书签同步不及时怎么办？两种方法帮你解决！
    多人协作多版本开发冲突的正确解决姿势
    CMake 将所有 Target 的工程在 Visual Studio 中加到同一个文件夹
    C++标准模板（STL）- 类型支持 （定宽整数类型）（int8_t,int_fast8_t,int_least8_t,intmax_t,intptr_t）
    数据库笔记
    源码解析系列：ConcurrentHashMap(2) - put方法和扩容
    使用USB转JTAG芯片CH347在Vivado下调试
    Excel拆分单元格怎么操作？学会这4招，工作效率倍涨！
    定时任务(一)
  • 原文地址：https://blog.csdn.net/QWERTY55555/article/details/133845250