Vue2學習筆記:鍵盤事件

本文轉載自查看原文 2017-02-21 11:08 9656 Javascript

Vue2鍵盤事件：keydown/keyup...

1.使用

<!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方法，然后再去執行相應的業務。

兩個input的效果都是一樣的如果安13 也就是按鍵 enter 才會執行彈窗！！

@keyup.13 回車

@keyup.enter 回車

@keyup.left 左鍵

@keyup.right 右鍵

@keyup.up 上鍵

@keyup.down 下鍵

@keyup.delete 刪除鍵

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue2學習筆記:事件對象、事件冒泡、默認行為 Vue2鍵盤事件：keydown/keyup... vue學習筆記（一）關於事件冒泡和鍵盤事件以及與Angular的區別 Vue2學習筆記:組件（Component） Vue2學習筆記:計算屬性（computed） Vue2學習筆記:v-for指令 Vue2學習筆記:html屬性 Vue2學習筆記:class和style js學習筆記27----鍵盤事件 Vue2學習筆記:數據交互vue-resource