vue鍵盤事件keyup、keydown的作用
更新時(shí)間：2023年12月04日 10:17:29 作者：冰雪奇緣lb
這篇文章主要介紹了vue鍵盤事件keyup、keydown的作用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Vue鍵盤事件keyup、keydown
1.Vue中的鍵盤事件keyup表示鍵盤按鍵抬起事件，keydown表示鍵盤按下事件；兩個(gè)用法相同。
2.用法比較簡(jiǎn)單，直接跟在v-on后面使用，
示例：
<input type="text" v-on:keydown="logName">
當(dāng)有鍵盤按鍵按下時(shí)調(diào)用logName()函數(shù)。
3.可以指定某個(gè)按鍵觸發(fā)，例如制定輸入內(nèi)容后，按enter鍵觸發(fā)，
代碼：
<input type="text" v-on:keydown.enter="logName">
也可以同時(shí)按多個(gè)鍵觸發(fā)，例如按alt+enter觸發(fā)：
<input type="text" v-on:keyup.alt.enter="logAge">
完整代碼展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="vue-app">
<h1>Events</h1>
<label>姓名</label>
<input type="text" v-on:keydown="logName">
<!-- <input type="text" v-on:keydown.enter="logName"> -->
<!--鍵盤按鍵抬起事件監(jiān)聽 -->
<label>年齡</label>
<!-- <input type="text" v-on:keyup="logAge"> -->
<input type="text" v-on:keyup.alt.enter="logAge">
<!--鍵盤按鍵抬起事件監(jiān)聽 -->
</div>
</body>
<script>
new Vue({
el: '#vue-app',
data() {
return {};
},
methods: {
logName() {
console.log('正在輸入名字...');
},
logAge() {
console.log('正在輸入年齡...');
}
}
})
</script>
</html>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
element中Steps步驟條和Tabs標(biāo)簽頁(yè)關(guān)聯(lián)的解決
這篇文章主要介紹了element中Steps步驟條和Tabs標(biāo)簽頁(yè)關(guān)聯(lián)的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了一個(gè)Vue的內(nèi)存泄露詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2021-10-10
vue前端測(cè)試開發(fā)watch監(jiān)聽data的數(shù)據(jù)變化
這篇文章主要為大家介紹了vue測(cè)試開發(fā)watch監(jiān)聽data的數(shù)據(jù)變化，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
眾所周知，一個(gè)項(xiàng)目在開發(fā)、測(cè)試與生產(chǎn)環(huán)境的各種配置變量是不一樣的，但在vue cli 3中通過(guò)指令vue create xxx創(chuàng)建的項(xiàng)目取消了默認(rèn)的 config 和 build 文件夾，這導(dǎo)致剛?cè)胧值男』锇椴恢涝谀膬号渲铆h(huán)境變量，不過(guò)官方也提供了相應(yīng)的配置方法，本文就來(lái)介紹一下2021-08-08
Vue報(bào)錯(cuò)：Uncaught TypeError: Cannot assign to read only propert
這篇文章主要給大家介紹了關(guān)于Vue報(bào)錯(cuò)：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 的解決方法，文中介紹的非常詳細(xì)，需要的朋友們下面來(lái)一起看看吧。2017-06-06
Vue v2.5 調(diào)整和更新不完全問(wèn)題
這篇文章主要介紹了Vue v2.5 調(diào)整和更新不完全問(wèn)題的相關(guān)資料,需要的朋友可以參考下2017-10-10
vue等待數(shù)據(jù)渲染完成后執(zhí)行下一個(gè)方法問(wèn)題
這篇文章主要介紹了vue等待數(shù)據(jù)渲染完成后執(zhí)行下一個(gè)方法問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
解決vue使用vant輪播組件swipe + flex時(shí)文字抖動(dòng)問(wèn)題
這篇文章主要介紹了解決vue使用vant輪播組件swipe + flex時(shí)文字抖動(dòng)問(wèn)題，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-01-01
Vue3 elementUI 中 date-picker 使用過(guò)程遇到坑
這篇文章主要介紹了Vue3 elementUI 中 date-picker 使用過(guò)程遇到坑,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10
這篇文章主要為大家介紹了Storybook?7.0?Beta?Vue3踩坑解決記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02