vue監(jiān)聽(tīng)鍵盤(pán)事件的快捷方法【推薦】
在我們的項(xiàng)目經(jīng)常需要監(jiān)聽(tīng)一些鍵盤(pán)事件來(lái)觸發(fā)程序的執(zhí)行，而Vue中允許在監(jiān)聽(tīng)的時(shí)候添加關(guān)鍵修飾符：
<input v-on:keyup.13="submit">
對(duì)于一些常用鍵，還提供了按鍵別名：
<input @keyup.enter="submit"> <!-- 縮寫(xiě)形式 -->
全部的按鍵別名：
.enter
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right
修飾鍵：
.ctrl
.alt
.shift
.meta
<!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>
與按鍵別名不同的是，修飾鍵和 keyup 事件一起用時(shí)，事件引發(fā)時(shí)必須按下正常的按鍵。換一種說(shuō)法：如果要引發(fā) keyup.ctrl，必須按下 ctrl 時(shí)釋放其他的按鍵；單單釋放 ctrl 不會(huì)引發(fā)事件。
<!-- 按下Alt + 釋放C觸發(fā) --> <input @keyup.alt.67="clear"> <!-- 按下Alt + 釋放任意鍵觸發(fā) --> <input @keyup.alt="other"> <!-- 按下Ctrl + enter時(shí)觸發(fā) --> <input @keydown.ctrl.13="submit">
對(duì)于elementUI的input，我們需要在后面加上.native, 因?yàn)閑lementUI對(duì)input進(jìn)行了封裝，原生的事件不起作用。
<input v-model="form.name" placeholder="昵稱(chēng)" @keyup.enter="submit"> <el-input v-model="form.name" placeholder="昵稱(chēng)" @keyup.enter.native="submit"></el-input>
總結(jié)
以上所述是小編給大家介紹的vue監(jiān)聽(tīng)鍵盤(pán)事件的快捷方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue報(bào)錯(cuò)Not?allowed?to?load?local?resource的解決辦法
這篇文章主要給大家介紹了關(guān)于vue報(bào)錯(cuò)Not?allowed?to?load?local?resource的解決辦法,這個(gè)錯(cuò)誤是因?yàn)閂ue不能加載本地資源的原因,需要的朋友可以參考下2023-07-07
Vue組件實(shí)例間的直接訪問(wèn)實(shí)現(xiàn)代碼
在組件實(shí)例中，Vue提供了相應(yīng)的屬性，包括$parent、$children、$refs和$root，這些屬性都掛載在組件的this上。本文將詳細(xì)介紹Vue組件實(shí)例間的直接訪問(wèn),需要的朋友可以參考下2017-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)列表的添加點(diǎn)擊，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
Vue中使用better-scroll實(shí)現(xiàn)輪播圖組件
better-scroll 是一款重點(diǎn)解決移動(dòng)端（已支持 PC）各種滾動(dòng)場(chǎng)景需求的插件。這篇文章主要介紹了Vue中使用better-scroll實(shí)現(xiàn)輪播圖組件的實(shí)例代碼,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了vue項(xiàng)目雙滑塊組件使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了vue項(xiàng)目支付功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
vue解決花括號(hào)數(shù)據(jù)綁定不成功的問(wèn)題
今天小編就為大家分享一篇vue解決花括號(hào)數(shù)據(jù)綁定不成功的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue中ref和$refs獲取元素dom、獲取子組件數(shù)據(jù)與方法調(diào)用示例
在Vue3中要獲取子組件的DOM節(jié)點(diǎn),你可以使用ref來(lái)引用子組件,然后通過(guò)$refs來(lái)訪問(wèn)子組件的DOM,下面這篇文章主要給大家介紹了關(guān)于vue中ref和$refs獲取元素dom、獲取子組件數(shù)據(jù)與方法調(diào)用的相關(guān)資料,需要的朋友可以參考下2024-07-07
Vue ElementUI實(shí)現(xiàn):限制輸入框只能輸入正整數(shù)的問(wèn)題
這篇文章主要介紹了Vue ElementUI實(shí)現(xiàn):限制輸入框只能輸入正整數(shù)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
ant design vue 表格table 默認(rèn)勾選幾項(xiàng)的操作
這篇文章主要介紹了ant design vue 表格table 默認(rèn)勾選幾項(xiàng)的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10