Vue方法與事件處理器詳解
更新時(shí)間：2016年12月01日 15:19:12 作者：愛喝酸奶的吃貨
這篇文章主要為大家詳細(xì)介紹了Vue方法與事件處理器，,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue方法與事件處理器的使用，供大家參考，具體內(nèi)容如下
按鍵修飾符
在監(jiān)聽鍵盤事件時(shí)，我們經(jīng)常需要檢測 keyCode。Vue.js 允許為 v-on 添加按鍵修飾符：
<!-- 只有在 keyCode 是 13 時(shí)調(diào)用 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'>新增項(xiàng)目</div>
<div class="name" v-if='!addp'>
<input type="text" class='name-input' placeholder='請(qǐng)?zhí)顚戫?xiàng)目名稱' 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: {
//當(dāng)你選種某個(gè)項(xiàng)目時(shí)，將其success屬性改為true，為其class添加 success
successT:function(index){
this.projectData.forEach(function(item){
item.success=false;
});
this.projectData[index].success=true;
},
//點(diǎn)擊添加項(xiàng)目后讓其不顯示
addproject:function(){
this.addp=false;
},
//當(dāng)用戶按回車后，保存添加的項(xiàng)目
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,//是否顯示添加項(xiàng)目
projectData:[{
success:false,
projectName: '人員管理系統(tǒng)'
}, {
success:false,
projectName: '管理系統(tǒng)'
},{
success:false,
projectName: '假數(shù)據(jù)1'
},{
success:false,
projectName: '假數(shù)據(jù)2'
}, {
success:false,
projectName: '假數(shù)據(jù)3'
}
],
}
}
}
</script>
頁面最開始：
當(dāng)你點(diǎn)擊新增項(xiàng)目后：
在文本框中輸入 “豆豆”后按回車鍵后頁面
當(dāng)你按回車鍵后觸發(fā) keyup.enter事件調(diào)saveProjectFun方法，在此方法中進(jìn)行數(shù)據(jù)保存。
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在VSCode中添加好用的插件可以提高我們的開發(fā)效率,這些可以幫助我們格式化,擴(kuò)充性,執(zhí)行最佳實(shí)踐的代碼方式,自動(dòng)完成一些瑣碎的事情,下面這篇文章主要給大家推薦介紹了關(guān)于Vue3開發(fā)必備的六個(gè)VSCode插件,需要的朋友可以參考下2022-12-12
Vue.js提供了簡潔、易于理解的API，幫助大家快速靈活掌握Vue.js。這篇文章主要介紹了如何在60分鐘內(nèi)輕松學(xué)習(xí)Vue.js，感興趣的小伙伴們可以參考一下2016-11-11
關(guān)于vue 項(xiàng)目中瀏覽器跨域的配置問題
這篇文章主要介紹了vue 項(xiàng)目中瀏覽器跨域的配置問題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
這篇文章主要介紹了vue中destroyed方法的使用說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
webpack+vue-cli項(xiàng)目中引入外部非模塊格式j(luò)s的方法
今天小編就為大家分享一篇webpack+vue-cli項(xiàng)目中引入外部非模塊格式j(luò)s的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue中使用vue-router切換頁面時(shí)滾動(dòng)條自動(dòng)滾動(dòng)到頂部的方法
這篇文章主要介紹了vue項(xiàng)目中在使用vue-router切換頁面的時(shí)候滾動(dòng)條自動(dòng)滾動(dòng)到頂部的實(shí)現(xiàn)方法，一般使用Window scrollTo() 方法實(shí)現(xiàn)，本文給大家簡單介紹了crollTop的使用,需要的朋友可以參考下2017-11-11
vue3點(diǎn)擊不同的菜單頁切換局部頁面實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue3點(diǎn)擊不同的菜單頁切換局部頁面實(shí)現(xiàn)的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考價(jià)值,需要的朋友可以參考下2023-08-08
如何在vue3+ts項(xiàng)目中使用query和params傳參
Vue3中的路由傳參有兩種方式:query和params,下面這篇文章主要給大家介紹了關(guān)于如何在vue3+ts項(xiàng)目中使用query和params傳參的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue中的H5移動(dòng)端項(xiàng)目?真機(jī)測試配置方式
這篇文章主要介紹了vue中的H5移動(dòng)端項(xiàng)目?真機(jī)測試配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue開發(fā)簡單上傳圖片功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06