vue鍵盤事件keyup、keydown的作用
更新時間：2023年12月04日 10:17:29 作者：冰雪奇緣lb
這篇文章主要介紹了vue鍵盤事件keyup、keydown的作用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
Vue鍵盤事件keyup、keydown
1.Vue中的鍵盤事件keyup表示鍵盤按鍵抬起事件，keydown表示鍵盤按下事件；兩個用法相同。
2.用法比較簡單，直接跟在v-on后面使用，
示例：
<input type="text" v-on:keydown="logName">
當(dāng)有鍵盤按鍵按下時調(diào)用logName()函數(shù)。
3.可以指定某個按鍵觸發(fā)，例如制定輸入內(nèi)容后，按enter鍵觸發(fā)，
代碼：
<input type="text" v-on:keydown.enter="logName">
也可以同時按多個鍵觸發(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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在Vue3中,我們經(jīng)常會遇到需要處理列表渲染的情況,Vue3引入了一種新的語法,即#default=“scope”,本文就來介紹一下Vue3中#default=“scope”的使用,感興趣的可以了解一下2023-10-10
vue 使用iView組件中的Table實現(xiàn)定時自動滾動效果
要在css中設(shè)置table的高度,使數(shù)據(jù)過多時出現(xiàn)滾動條,將縱向設(shè)置為overflow-y: auto;橫向設(shè)置隱藏 overflow-x: hidden,接下來通過本文介紹vue使用iView組件中的Table實現(xiàn)定時自動滾動效果,需要的朋友可以參考下2024-05-05
使用axios發(fā)送post請求,將JSON數(shù)據(jù)改為form類型的示例
今天小編就為大家分享一篇使用axios發(fā)送post請求,將JSON數(shù)據(jù)改為form類型的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue導(dǎo)出excel和echart圖形分別在不同工作表的實現(xiàn)方法
這篇文章主要給大家介紹了如何使用vue實現(xiàn)導(dǎo)出excel和echart圖形分別在不同工作表,文中有詳細的代碼示例供大家參考,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-10-10
這篇文章主要給大家介紹了關(guān)于在Vue中使用Echarts可視化庫的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
本文主要介紹了vue自定義鍵盤實現(xiàn)車牌號的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
vue使用jsMind思維導(dǎo)圖的實戰(zhàn)指南
jsMind是一個顯示/編輯思維導(dǎo)圖的純javascript類庫,其基于 html5的canvas進行設(shè)計,這篇文章主要給大家介紹了關(guān)于vue使用jsMind思維導(dǎo)圖的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了解決Vue3+ts項目打包時報錯的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-06-06
vite打包出現(xiàn)"default"?is?not?exported?by?"no
這篇文章主要給大家介紹了關(guān)于vite打包出現(xiàn)"default"?is?not?exported?by?"node_modules/...問題解決的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11
vue2中的el-select組件數(shù)據(jù)太多,如何實現(xiàn)滾動加載數(shù)據(jù)效果
這篇文章主要介紹了vue2中的el-select組件數(shù)據(jù)太多,如何實現(xiàn)滾動加載數(shù)據(jù)效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04