欢迎您, 来到 宁时修博客.^_^

Vue绑定回车事件@keyup.enter无效

2020/02/05 宁时修 javascript,Vue 138
使用Vue.js绑定回车事件@keyup.enter无效的原因

在使用Vue.js时,click事件和keyup.13或者keyup.enter绑定在同一个位置的时候,回车事件是不会生效的。

错误写法:

<button class="btn btn-success btn-block" type="button" @click="submit" @keyup.enter="submit">登 录</button>

正确的写法:

<form>
  <input type="text" v-model="username" class="form-control uname" placeholder="用户名" />
  <input type="password" v-model="password" class="form-control pword m-b" placeholder="密码" @keyup.enter="submit"/>
  <button class="btn btn-success btn-block" type="button" @click="submit">登 录</button>
</form>

将回车事件绑定在最后一个input框中 等同于 输入完用户名和密码 按回车就可以登录啦

切记不要把2个事件都绑定在同一个html标签元素中哦。

点赞

上一篇 :  MySQL性能优化日志

原文地址 :  https://www.mgchen.com/272.html

说说你的看法

所有评论: (3)

# 加入组织

1、用手机QQ扫左侧二维码

2、搜Q群:1058582137

3、点击 宁时修博客交流群