Maison >interface Web >js tutoriel >Code d'implémentation pour les modificateurs de touches personnalisés (événements d'écoute du clavier) dans Vue
Le contenu de cet article concerne le code d'implémentation des modificateurs de touches personnalisés (événements d'écoute du clavier) dans Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Le modificateur de touche est l'événement d'écoute du clavier fourni par Vue.
Le code est le suivant :
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id='app' 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:'#app', data:{ id:'', name:'', }, methods:{ add(){ alert(this.name); this.id = this.name = ""; }, }, }); </script> </html>
Tous les alias clés
.enter
.tab
.delete
.esc
.space
.up
.left
.down
.right
Vous pouvez également définir l'alias du modificateur de valeur de clé personnalisé partie js via l'objet
config.keyCodes:
//自定义全局按键修饰符,键盘码和键盘按键的对应关系可自行百度。 Vue.config.keyCodes.f2 = 113;
Utiliser :
<input type="text" v-model="name" class="form-control" @keyup.f2="add">
Recommandations associées :
Doutes sur les modificateurs de membres de classe
vue d'instructions personnalisées pour implémenter le plug-in v-tap
Explication détaillée de l'utilisation de composants dynamiques personnalisés dans vue
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!