Vue method and event processor details

Vue method and event processor details examples in this article share the use of the Vue method and event processor for your reference. The details are as follows:

Key Modifier

When listening for Keyboard Events, we often need to detect keyCode. Vue. js allows you to add a key modifier for v-on:

It is difficult to remember all keycodes. Vue. js provides aliases for the most common keys:

All key aliases: enter, tab, delete, esc, space, up, down, left, right.

Eg:

The HTML is as follows:

 
  
 
  
 
    
   
  
{Project. projectName }}
 
  
Add a project
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
   
 

JS Code:

Script export default {components :{}, ready: function () {}, methods: {// when you select a project, change its success attribute to true, add success successT: function (index) {this. projectData. forEach (function (item) {item. success = false ;}); this. projectData [index]. success = true ;}, // click Add project so that it does not display addproject: function () {this. addp = false ;}, // when you press enter, save the added project saveProjectFun: function () {var obj ={} 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 key") ;}, upFun: function () {alert ("up") ;}, downFun: function () {alert ("down") ;}, leftFun: function () {alert ("left") ;}, rightFun: function () {alert ("right") ;}, data () {return {addp: true, // whether project projectData: [{success: false, projectName: 'personnel management system'}, {success: false, projectName: 'Management system'}, {success: false, projectName: 'fake data 1'}, {success: false, projectName: 'fake data 2' },{ success: false, projectName: 'fake data 3'}] ,}} script

Page start:

When you press the enter key and trigger the keyup. enter event to call the saveProjectFun method, save the data in this method.