Vue方法與事件處理器詳解

更新時間：2016年12月01日 15:19:12 作者：愛喝酸奶的吃貨

這篇文章主要為大家詳細介紹了Vue方法與事件處理器，,具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue方法與事件處理器的使用，供大家參考，具體內容如下

按鍵修飾符

在監(jiān)聽鍵盤事件時，我們經常需要檢測 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='請?zhí)顚戫椖棵Q' 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: '人員管理系統(tǒng)'
  }, { 
  success:false,
  projectName: '管理系統(tǒng)'
  },{
  success:false,
  projectName: '假數據1'
  },{
  success:false,
  projectName: '假數據2'
  }, {
  success:false,
  projectName: '假數據3'
  }
 ],
 }
 }
}
</script>

頁面最開始：