zoukankan      html  css  js  c++  java
  • Vue之键盘事件

    1.使用keydown触发事件

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <style>  
      
        </style>  
        <script src="vue.js"></script>  
        <script>  
            window.onload=function(){  
                new Vue({  
                    el:'#box',  
                    data:{  
      
                    },  
                    methods:{  
                        show:function(){  
                            alert(1);  
                        }  
                    }  
                });  
            };  
        </script>  
    </head>  
    <body>  
        <div id="box">  
            <input type="text" @keydown="show">  
        </div>  
    </body>  
    </html>  

    描述:

    按下键盘触发show方法,弹出框1.

    结果:

    2.按下键盘弹出事件的键码

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <style>  
      
        </style>  
        <script src="vue.js"></script>  
        <script>  
            window.onload=function(){  
                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>  

    3.keyup事件

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <style>  
      
        </style>  
        <script src="vue.js"></script>  
        <script>  
            window.onload=function(){  
                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>  

    4.Vue中在键盘事件后面添加键码值就可以说明是按下了哪个键

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <style>  
      
        </style>  
        <script src="vue.js"></script>  
        <script>  
            window.onload=function(){  
                new Vue({  
                    el:'#box',  
                    data:{  
      
                    },  
                    methods:{  
                        show:function(){  
                            alert('您按回车了');  
                        }  
                    }  
                });  
            };  
        </script>  
    </head>  
    <body>  
        <div id="box">  
            <input type="text" @keyup.13="show()">  
        </div>  
    </body>  
    </html>  

    4.使用键名enter

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <style>  
      
        </style>  
        <script src="vue.js"></script>  
        <script>  
            window.onload=function(){  
                new Vue({  
                    el:'#box',  
                    data:{  
      
                    },  
                    methods:{  
                        show:function(){  
                            alert('您按回车了');  
                        }  
                    }  
                });  
            };  
        </script>  
    </head>  
    <body>  
        <div id="box">  
            <input type="text" @keyup.enter="show()">  
        </div>  
    </body>  
    </html>  

    5.使用键名left

    <!DOCTYPE html>  
    <html lang="en">  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <style>  
      
        </style>  
        <script src="vue.js"></script>  
        <script>  
            window.onload=function(){  
                new Vue({  
                    el:'#box',  
                    data:{  
      
                    },  
                    methods:{  
                        show:function(){  
                            alert(1);  
                        }  
                    }  
                });  
            };  
        </script>  
    </head>  
    <body>  
        <div id="box">  
            <input type="text" @keyup.left="show()">  
        </div>  
    </body>  
    </html>  
  • 相关阅读:
    深度学习时代的图模型,清华发文综述图网络
    深入解析CNN pooling 池化层原理及其作用
    如何理解线性回归中的“回归”,回归到哪里?
    线性回归中“回归”的含义
    深度学习基础——Epoch、Iteration、Batchsize
    手动清空微信PC客户端数据
    Mini-batch 和batch的区别
    Python中绘制场景热力图
    HSV颜色识别-HSV基本颜色分量范围
    Android拨打接听电话自动免提
  • 原文地址:https://www.cnblogs.com/chaofei/p/7706806.html
Copyright © 2011-2022 走看看