vue の主要な修飾子は何ですか-フロントエンドQ&A-php.cn

vue の主要な修飾子は何ですか

青灯夜游

リリース： 2022-01-04 11:33:38

オリジナル

4738 人が閲覧しました

vue のキー修飾子は次のとおりです: 1. Enter キーをキャプチャできる「.enter」、2. Tab キーをキャプチャできる「.tab」、3. 「.delete」「delete」キーと「backspace」キーをキャプチャします。4.「.esc」、キャンセルキーをキャプチャできます。5.「.space」、スペースバーをキャプチャできます。6.「.up」など。

vue の主要な修飾子は何ですか

このチュートリアルの動作環境: Windows10 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

キーボードイベントをリッスンするとき、よく使用されるキーに対応するコード値を見つける必要があることがよくあります。 Vue はキー修飾子を v-on に追加して、キーイベントをリッスンできます。

すべてのキー修飾子のエイリアスはここにリストされています:

.enter => // enter键
.tab => // tab键
.delete (捕获“删除”和“退格”按键) => // 删除键
.esc => // 取消键
.space => // 空格键
.up => // 上
.down => // 下
.left => // 左
.right => // 右

ログイン後にコピー

通常のログイン機能の操作では、パスワードを入力した後、次のように入力します。 Enter キーを押してログインするので、マウスを操作しながらログインボタンをクリックする必要はありません。では、この関数は vue ではどのように実装されているのでしょうか?

このケースをデモンストレーションするために、単純なデータ追加関数を作成してみましょう:

  <style>
        table{
            width:760px;
            /* margin: 0 auto; */
            border-collapse: collapse;
        }   
        table td{
            border: 1px solid black;
            width: .4rem;
        }
    </style>
</head>
<body>
    
    <div id="app">
        <label for="">id</label>
        <input type="text" v-model="id">
        <label for="">name</label>
        <input type="text" v-model="name">
        <input type="button" value="添加" @click="add()">
 
        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                </tr>
            </tbody>
        </table>
    </div>
 
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:&#39;#app&#39;,
            data:{
                list:[
                    {id:1,name:&#39;哈哈&#39;}
                ],
                id:&#39;&#39;,
                name:&#39;&#39;
            },
            methods: {
                add(){
                    // 向数组的最后一位添加新的对象
                    this.list.push({id:this.id,name:this.name})
                    // 完成添加后清空文本框
                    this.id=this.name=""
                }
            }
        })
    </script>
</body>

ログイン後にコピー

現時点では、追加ボタンをクリックして追加できます

vue の主要な修飾子は何ですか

keyup キーリフトイベントはネイティブ JS で提供されており、次のことができます。メソッドセンターの add メソッドをキーアップリフトイベントにバインドして、目的の効果が得られるかどうかを確認します。名前を入力した後に Enter キーを押すため、キーアップイベントを [名前内] テキストボックス

 <input type="text" v-model="name" @keyup="add()">

ログイン後にコピー

## にバインドします。

vue の主要な修飾子は何ですか

#, 名前を入力すると、Enter キーを押さなくても自動的に追加されたことがわかります。このとき、Modifier

                                 <!-- enter:回车键 -->
<input type="text" v-model="name" @keyup.enter="add()">

ログイン後にコピー

When というキーを使用する必要があります。入力が完了し、テキストボックスはまだフォーカスを取得しています。Enter キーを押すと、追加関数が実行されます。

vue の主要な修飾子は何ですか

Enter に加えて、Vue 公式Web サイトでは次の修飾子も提供しています:

必要に応じて古いブラウザをサポートするために、Vue は最も一般的に使用されるキーコードのエイリアスを提供します:

.enter
##.delete
.esc
.space
.up
.down
.left
.right

<input type="text" v-model="name" @keyup.f4="add()">

ログイン後にコピー

これは vue の主要な修飾子は何ですか Vue in 2.5.0

新しい自動一致キー修飾子ですが、通常はファンクションキーのみを使用します。キー修飾子、

キーを入力しないようにしてください

[関連する推奨事項: "

vue.js チュートリアル

以上がvue の主要な修飾子は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。