la syntaxe du modèle Vue - modification de l'événement du clavier

Tout d'abord, les modificateurs de clavier

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

• entrez: Entrée
• onglet: touche de tabulation
• supprimer: touches Suppr et backspace avec
• esc: clé de retour
• espace: barre d'espace
• up: up clé
• vers le bas: BAS
• gauche: Flèche gauche
• droit: le droit de

Note: modification du clavier à ajouter à l'étiquette liée nom de l' événement keyup, puis ajouter des modificateurs de clavier

Par exemple :. @Keyup modificateur = "Méthode" => @keyup.enter="handle"

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

Deux, entrez modificateurs

1. .Entrer en cliquant sur les entertouches déclenchent la méthode de reliure

2. exemple
   <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>

   ##, trois modificateurs de suppression
   1. claquements .delete deleteclés déclenchent la méthode de reliure
   2. exemple

       <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>