vue中的@keyup事件
什么是@keyup@keyup是按键松开,当指定的按键松开会触发的事件事件代码事件描述@keyup.enter回车按键松开@keyup.left左键按键松开@keyup.right右键按键松开@keyup.up上键按键松开@keyup.down下键按键松开@keyup.delete删除键松开@keyup 事件使用场景:平台登录页面可以使用该事件,当输入账号和密码后,无需点击登录按钮,直接在输入密码
·
什么是@keyup
@keyup(键盘事件)是按键松开,当指定的按键松开会触发的事件
事件代码 | 事件描述 |
---|---|
@keyup.enter | 回车按键松开 |
@keyup.left | 左键按键松开 |
@keyup.right | 右键按键松开 |
@keyup.up | 上键按键松开 |
@keyup.down | 下键按键松开 |
@keyup.delete | 删除键松开 |
@keyup 事件使用场景:
平台登录页面可以使用该事件,当输入账号和密码后,无需点击登录按钮,直接在输入密码以后回车完成登录,以增加用户体验
@keyup.enter(回车键松开) 事件监听如下:
<template>
<div>
<div>
<input type="text" placeholder="请输入账号"/>
</div>
<div>
<input type="password" placeholder="请输入密码" @keyup.enter="keyupTest"/>
</div>
</div>
</template>
<script>
export default {
name: "@keyup_60",
data(){
return {
input:"",
}
},
methods:{
keyupTest(){
console.log("正在登录中......")
}
}
}
</script>
<style scoped>
</style>
@keyup 在element-ui中使用
@keyup在element-ui组件中失效。这是因为element-ui组件在原生组件的基础上进行了封装。如想使用@keyup则需要加上native关键词。
即@keyup.native.enter(回车按键松开)
更多推荐
所有评论(0)