10/04 keyup.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="example-2">
        <ul>
            <li>
                <input v-on:keyup.13="say('第1式')" v-model="a1"> 当你按下 enter ，弹窗
            </li>
            <li>
                <!-- same as above -->
                <input v-on:keyup.enter="say1('第2式')" v-model="a2"> 当你按下 enter ，弹窗
            </li>
            <li>
                <!-- also works for shorthand -->
                <input @keyup.enter="say2('第3式')" v-model="a3"> 当你按下 enter ，弹窗
            </li>
            <li>
                <!-- enable @keyup.f1-->
                <input @keyup.f1="say3('第4式,f1')" v-model="a4"> 当你按下 f1(macbook pro , fn+f1) ，弹窗
            </li>
        </ul>
    </div>
    <script>
    // enable @keyup.f1
    Vue.directive('on').keyCodes.f1 = 112
    new Vue({
        el: '#example-2',
        data: {
            a1: '',
            a2: '',
            a3: '',
            a4: ''
        },
        methods: {
            say: function(msg) {
                alert(msg + ', ' + this.a1);
            },
            say1: function(msg) {
                alert(msg + ', ' + this.a2);
            },
            say2: function(msg) {
                alert(msg + ', ' + this.a3);
            },
            say3: function(msg) {
                alert(msg + ', ' + this.a4);
            }
        }
    })
    </script>
</body>

</html>