Vueのテンプレート構文 - キーボードイベント修飾子

まず、キーボード修飾子

在JavaScript事件中除了前面所说的事件，还有键盘事件，也经常需要监测常见的键值。在Vue中允许v-on在监听键盘事件时添加关键修饰符。记住所有的keyCode比较困难，所以Vue为最常用的键盘事件提供了别名：

次のコマンドを入力します。Enterキーを
タブ：タブ・キー
削除：で削除とバックスペースキーを
ESC：リターンキー
スペース：スペースバー
アップ：アップキー
ダウン：DOWN ARROW
左：左矢印
右：右に

注：キーボード修飾子は、キーボード修飾子を追加し、ラベルバインドkeyUpイベント名に追加します

例えば:. @Keyup修飾子= "方法" => @keyup.enter="handle"

    v-on:keyup.修饰符="方法" => `v-on:keyup.enter="handle"`

二、修飾子を入力します。

.enterクリックenterキーは、結合方法をトリガー

例
<div id="app"> <form action="" method="post"> <div> <input type="text" v-model="uname"/> </div> <div> <input type="password" v-model="pwd" @keyup.enter="handleSubmit"/> </div> <div> <input type="button" @click="handleSubmit" value="提交"> </div> </form> </div> <script src="../js/vue.js"></script> <script> var vm = new Vue({ el: "#app", data: { uname:'', pwd:'' }, methods: { handleSubmit:function(){ console.log(this.uname,this.pwd); } } }) </script>

## 3、削除修飾子

.deleteクリックdeleteキーが結合の方法をトリガ
例

    <div id="app">
        <form action="" method="post">
            <div>
                <input type="text" v-model="uname" v-on:keyup.delete="clearContent"/>
            </div>
            <div>
                <input type="password" v-model="pwd" @keyup.enter="handleSubmit"/>
            </div>
            <div>
                <input type="button" @click="handleSubmit" value="提交">
            </div>
        </form>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                uname:'',
                pwd:''
            },
            methods: {
                handleSubmit:function(){
                    console.log(this.uname,this.pwd);
                },
                clearContent:function(){
                    this.uname = '';
                }
            }
        })
    </script>