Vue键盘事件

键盘事件


<html>
<head>
    <meta charset="utf-8">
    <title>title>
    <script src="../js/Vue.js" charset="utf-8">script>
    <script type="text/javascript">
        window.onload = function () {
            var vm = 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>

keyCode


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

keyUp


<html>
<head>
    <meta charset="utf-8">
    <title>title>
    <script src="../js/Vue.js" charset="utf-8">script>
    <script type="text/javascript">
        window.onload = function () {
            var vm = 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>

键盘事件——简写方式


<html>
<head>
    <meta charset="utf-8">
    <title>title>
    <script src="../js/Vue.js" charset="utf-8">script>
    <script type="text/javascript">
        window.onload = function () {
            var vm = new Vue({
                el: '#box',
                data: {},
                methods: {
                    show: function () {
                        alert('你按了回车!');
                    },
                    show2: function () {
                        alert('你按了回车!');
                    },
                    show3: function () {
                        alert('你按了上键!');
                    },
                    show4: function () {
                        alert('你按了下键!');
                    },
                    show5: function () {
                        alert('你按了左键!');
                    },
                    show6: function () {
                        alert('你按了右键!');
                    }
                }
            });
        }
    script>
head>
<body>
<div id="box">
    <input type="text" @keyup.13="show()">
    <hr>
    <input type="text" @keyup.enter="show2()">
    <hr>
    <input type="text" @keyup.up="show3()">
    <hr>
    <input type="text" @keyup.down="show4()">
    <hr>
    <input type="text" @keyup.left="show5()">
    <hr>
    <input type="text" @keyup.right="show6()">
    <hr>
div>
body>
html>

你可能感兴趣的:(Vue)