Vue 方法與事件處理器

按鍵修飾符

在監聽鍵盤事件時，我們經常需要檢測 keyCode。Vue.js 允許為 v-on 添加按鍵修飾符：

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

記住所有的 keyCode 比較困難，Vue.js 為最常用的按鍵提供別名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">

全部的按鍵別名：enter 、tab 、delete、 esc 、space、 up 、down、 left 、right。

eg：如下

HTML如下：

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

JS代碼：

<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: '人員管理系統'
                  }, { 
                    success:false,
                    projectName: '管理系統'
                  },{
                    success:false,
                    projectName: '假數據1'
                  },{
                    success:false,
                    projectName: '假數據2'
                  }, {
                    success:false,
                    projectName: '假數據3'
                  }
                ],
    }
  }
}
</script>

頁面最開始：

當你點擊新增項目后：

在文本框中輸入  “豆豆”后按回車鍵后頁面

當你按回車鍵后觸發  keyup.enter事件調saveProjectFun方法，在此方法中進行數據保存