Vue2中的鍵盤事件

Vue2鍵盤事件:keydown/keyup

使用:

    <!DOCTYPE html>  
    <html>  
    <head>  
        <title></title>  
        <meta charset="utf-8">  
        <script src="vue.js"></script>  
      
        <script type="text/javascript">  
            window.onload = function(){  
                var vm = new Vue({  
                    el:'#box',  
                    methods:{  
                        show:function(ev){  
                            if(ev.keyCode == 13){  
                                alert('你按回車鍵了');  
                            }  
                        },  
                    }  
                });  
            }  
        </script>  
    </head>  
    <body>  
        <div id="box">  
            <input type="text" placeholder="請輸入" @keyup="show($event)">   
      
            <input type="text" placeholder="請輸入" @keyup.13="show($event)">  
        </div>  
    </body>  
    </html>  

當按下鍵盤的時候,執行show方法,然後再去執行相應的業務。

@keyup.13 回車
@keyup.enter 回車
@keyup.left 左鍵
@keyup.right 右鍵
@keyup.up 上鍵
@keyup.down 下鍵
@keyup.delete 刪除鍵

發佈了34 篇原創文章 · 獲贊 21 · 訪問量 12萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章