vue之按键事件与修饰符
按键事件
按键事件就是，按了键盘的一个按键，就会触发绑定函数的执行。
| 按键 | 说明 |
|---|---|
| keyup | 按键弹起的时候触发（最常用） |
| keydown | 按键按下的时候触发 |
| keypress | 按键按压的时候触发 |
语法
# 在标签上进行定义
@keyup="函数"
@keydown="函数"
@keypress="函数"
示例
<body>
<div id="app">
<!--keyup绑定一个func-->
<input type="text" v-model="mytext" @keyup="keyupFunc"><span>---->{{mytext}}</span>
</div>
</body>
<script>
vm=new Vue({
el: '#app',
data:{
mytext:'',
},
methods:{
keyupFunc(event){
// event.key可以看到按下的是哪个按键
// event.keyCode可以看到按键对应的code，这样就可以按code进行判断按键是否被按下
console.log('按下的按键是：', event.key,'这个按键对应的code是:', event.keyCode)
if (event.keyCode === 13){
console.log('您按下了回车')
}
}
}
})
</script>
按键修饰符
上面的示例如果使用按键修饰符的话，代码会更加简洁
语法
# 使用keyup举例
# 在下面的方法里面加上 .修饰符可以使用enter之类的标识
@keyup.enter="函数"/@keyup.alt/@keyup.esc ...
# 修饰符也可以用keyCode
@keyup.13="函数"
示例
<div id="app">
<input type="text" v-model="mytext" @keyup.13="keyupFunc"><span>---->{{mytext}}</span>
</div>
</body>
<script>
vm = new Vue({
el: '#app',
data: {
mytext: '',
},
methods: {
keyupFunc() {
console.log('enter被按下了')
},
},
})
</script>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· AI与.NET技术实操系列（六）：基于图像分类模型对图像进行分类