Vue方法與事件處理器詳解

2019-11-19 18:44:13

字體：大中小

來源：轉載

供稿：網友

本文實例為大家分享了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>

頁面最開始：