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

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

2020/02/05 宁时修 javascript,Vue 673
使用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标签元素中哦。

点赞
说说你的看法

所有评论: (3)