The Vue method and the event handler

Key modifier

When listening to keyboard events, we often need to detect keycode. Vue.js allows for v-on adding key modifiers:

 Call Vm.submit ()--><input v-on:keyup. ="submit">

Keep in mind that all keycode are difficult, vue.js provide aliases for the most commonly used keys:

<!--ibid--><input v-on:keyup.enter="submit"><!--abbreviation Syntax--><input @ keyup.enter="submit">

All key aliases:Enter, tab, delete, ESC, space, up, down, left, right.

Eg: as follows

The HTML is as follows:<template><divclass="Home-body"> <divclass="Project-all"> <template V for='Project in Projectdata'> <divclass="name"v-on:click='successt ($index)'V-bind:class="{' Success ':p roject.success}">{{project.projectName}}</div> </template> <divclass="name"V-if='ADDP'v-on:click='AddProject'> New Projects </div> <divclass="name"V-if='!ADDP'v-on:click='AddProject'> <input type="text" class='Name-input'Placeholder='please fill in the project name'V-on:keyup.enter='Saveprojectfun'V-el:addproject> </div> <divclass="name"> <input type="text" class='Name-input'Placeholder='ESC'V-on:keyup.esc='Escfun'> </div> <divclass="name"> <input type="text" class='Name-input'Placeholder='Delete'V-on:keyup.delete='Deletefun'> </div> <divclass="name"> <input type="text" class='Name-input'Placeholder='Space'V-on:keyup.space='Spacefun'> </div> <divclass="name"> <input type="text" class='Name-input'Placeholder=' up'v-on:keyup.up='Upfun'> </div> <divclass="name"> <input type="text" class='Name-input'Placeholder=' Down'v-on:keyup.down='Downfun'> </div> <divclass="name"> <input type="text" class='Name-input'Placeholder=' Left'v-on:keyup.left='Leftfun'> </div> <divclass="name"> <input type="text" class='Name-input'Placeholder=' Right'v-on:keyup.right='Rightfun'> </div> </div></div></template>

JS Code:<script>Exportdefault{components: {}, Ready:function () {}, methods: {//When you seed a project, change its success property to true to add success to its classsuccesst:function (index) { This. Projectdata.foreach (function (item) {item.success=false;      });  This. projectdata[index].success=true; },    //Click Add item to not show itaddproject:function () { This. addp=false; },      //Save the added item when the user presses ENTERsaveprojectfun:function () {varobj={} obj.success=false; Let name= This. $els. Addproject.value; Obj.projectname=name.replace (/\s+/g,"");  This. Projectdata.push (obj);  This. addp=true; }, Escfun:function () {alert ("ESC"); }, Deletefun:function () {alert ("Delete"); }, Spacefun:function () {alert ("Space Space Bar"); }, Upfun:function () {alert (" up"); }, Downfun:function () {alert (" Down"); }, Leftfun:function () {alert (" Left"); }, Rightfun:function () {alert (" Right"); }}, data () {return{ADDP:true,//whether to show add itemsprojectdata:[{Success:false, ProjectName:'Personnel Management System'}, {success:false, ProjectName:'Management System'},{Success:false, ProjectName:'false Data 1'},{Success:false, ProjectName:'false Data 2'}, {success:false, ProjectName:'false Data 3'                  }                ],    }  }}</script>

At the beginning of the page:

When you click Add Item:

After entering "Bean" in the text box, press ENTER after the page

When you press ENTER to trigger the Keyup.enter event Saveprojectfun method, save the data in this method

The Vue method and the event handler