Detailed explanation of Vue methods and event handlers

The example in this article shares the use of Vue methods and event handlers for your reference. The specific content is as follows

Key modifiers

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

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

It is difficult to remember all the keyCode. Vue.js provides aliases for the most commonly used keys:

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

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

eg:

HTML is as follows:

<template>
<div class="home-body">
 <div class="project-all">
 <template v-for=&#39;project in projectData&#39;>
 <div class="name" v-on:click=&#39;successT($index)&#39; v-bind:class="{&#39;success&#39;:project.success}">{{project.projectName}}</div>
 </template>
 <div class="name" v-if=&#39;addp&#39; v-on:click=&#39;addproject&#39;>新增项目</div>
 <div class="name" v-if=&#39;!addp&#39;>
 <input type="text" class=&#39;name-input&#39; placeholder=&#39;请填写项目名称&#39; v-on:keyup.enter=&#39;saveProjectFun&#39; v-el:addProject>
 </div>
 <div class="name">
 <input type="text" class=&#39;name-input&#39; placeholder=&#39;esc&#39; v-on:keyup.esc=&#39;escFun&#39;>
 </div>
 <div class="name">
 <input type="text" class=&#39;name-input&#39; placeholder=&#39;delete&#39; v-on:keyup.delete=&#39;deleteFun&#39;>
 </div>
 <div class="name">
 <input type="text" class=&#39;name-input&#39; placeholder=&#39;space&#39; v-on:keyup.space=&#39;spaceFun&#39;>
 </div>
 <div class="name">
 <input type="text" class=&#39;name-input&#39; placeholder=&#39;up&#39; v-on:keyup.up=&#39;upFun&#39;>
 </div>
 <div class="name">
 <input type="text" class=&#39;name-input&#39; placeholder=&#39;down&#39; v-on:keyup.down=&#39;downFun&#39;>
 </div>
 <div class="name">
 <input type="text" class=&#39;name-input&#39; placeholder=&#39;left&#39; v-on:keyup.left=&#39;leftFun&#39;>
 </div>
 <div class="name"> 
 <input type="text" class=&#39;name-input&#39; placeholder=&#39;right&#39; v-on:keyup.right=&#39;rightFun&#39;>
 </div>
 </div>
</div>
</template>

JS code:

<script>
export default {
 components: {
 
 },
 ready: function() {
  
 },
 methods: {
 //当你选种某个项目时，将其success属性改为true，为其class添加 success 
 successT:function(index){
 this.projectData.forEach(function(item){
 item.success=false;
 });
 this.projectData[index].success=true;
 },
 //点击添加项目后让其不显示
 addproject:function(){
 this.addp=false;
 }, 
 //当用户按回车后，保存添加的项目
 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空格键");
 },
 upFun:function(){
 alert("up");
 },
 downFun:function(){
 alert("down");
 },
 leftFun:function(){
 alert("left");
 },
 rightFun:function(){
 alert("right");
 }
 },
 data() {
 return {
 addp:true,//是否显示添加项目
 projectData:[{
  success:false,
  projectName: &#39;人员管理系统&#39;
  }, { 
  success:false,
  projectName: &#39;管理系统&#39;
  },{
  success:false,
  projectName: &#39;假数据1&#39;
  },{
  success:false,
  projectName: &#39;假数据2&#39;
  }, {
  success:false,
  projectName: &#39;假数据3&#39;
  }
 ],
 }
 }
}
</script>

Start of the page:

When you click to add a new item:

Enter "Doudou" in the text box After pressing the Enter key, the page

triggers the keyup.enter event to call the saveProjectFun method after you press the Enter key, and save the data in this method.