コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > Vue のカスタム キー修飾子 (キーボード リスニング イベント) の実装コード

Vue のカスタム キー修飾子 (キーボード リスニング イベント) の実装コード

不言
リリース： 2018-08-14 16:24:04
オリジナル
1822 人が閲覧しました

この記事では、Vue のカスタム キー修飾子 (キーボード リスニング イベント) の実装コードを紹介します。必要な方は参考にしていただければ幸いです。

Key modifier は、Vue が提供するキーボードリスニングイベントです。

コードは次のとおりです: 

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
<body>
  <div id=&#39;app&#39; style="width:90%;margin:0 auto;">
    <label>Id:<input type="text" v-model="id" class="form-control"></label>
    <label>Name:
        <!--输入完成之后按下 enter键即可调用add 方法-->
      <input type="text" v-model="name" class="form-control" @keyup.enter="add">
    </label>
    <input type="button" class="btn btn-primary" name="" value="添加" @click="add" />
  </div>
</body>
<script src="../lib/vue.js"></script>
<script>
  var vm = new Vue({
    el:&#39;#app&#39;,
    data:{
      id:&#39;&#39;,
      name:&#39;&#39;,
    },
    methods:{
      add(){
        alert(this.name);
        this.id = this.name = "";
      },
    },
  });
</script>
</html>
ログイン後にコピー

すべてのキーのエイリアス

.enter

.tab

.delete

.esc

.space

.up

.left

.down

.そうです

config.keyCodes オブジェクトを使用してキー値修飾子のエイリアスをカスタマイズすることもできます

js パーツ定義: 

//自定义全局按键修饰符，键盘码和键盘按键的对应关系可自行百度。
Vue.config.keyCodes.f2 = 113;
ログイン後にコピー

使用方法: 

<input type="text" v-model="name" class="form-control" @keyup.f2="add">
ログイン後にコピー

関連する推奨事項:

クラスメンバー修飾子に関する疑問

vue のカスタマイズ v-tap プラグインの実装手順

vue のカスタム動的コンポーネントの使用方法の詳細な説明

以上がVue のカスタム キー修飾子 (キーボード リスニング イベント) の実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
自定义按键修饰符
ソース：php.cn
前の記事：jsコードを介してファイルをローカルにダウンロードするにはどうすればよいですか? （例） 次の記事：js コードは HTML のどこに配置する必要がありますか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2248
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2387
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1997
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1883
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1953
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート