首页 > 其他分享 >vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native

vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native

时间:2023-12-15 15:15:50浏览次数:36  
标签:vue keyup 键盘 enter 监听 native

vue运行为v-on在监听键盘事件时,添加了特殊的键盘修饰符:
<input v-on:keyup.13="submit">
vue还非常贴心地给出了常用按键的别名,这样就不必去记keyCode ~ ~
上面代码,还可以在这样写:
<input v-on:keyup.enter="submit">
<input @keyup.enter="submit">
全部的键盘别名:
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
还有一些组合按键:
.ctrl
.alt
.shift
.meta(window系统下是window键,mac下是command键)
Alt + C :
<input @keyup.alt.67="doSth">
Ctrl + Click :
<div @click.ctrl="doSth">点我</div>
注意!!!如果用了封装组件的话,比如element,这个时候使用按键修饰符需要加上.native
比如:
<el-input v-model="account" placeholder="请输入账号" @keyup.enter.native="search()"></el-input>

 

标签:vue,keyup,键盘,enter,监听,native
From: https://www.cnblogs.com/lucky06y/p/17903390.html

相关文章

  • 【面试必备】Vue 3 常见问题全解析,让你轻松过关!
    谈谈你对Vue的理解?为什么使用Vue进行开发?根据官方说法,Vue是一套用于构建用户界面的渐进式框架。Vue的设计受到了MVVM的启发。Vue的两个核心是数据驱动和组件系统。我为什么使用Vue,有以下几个原因:Vue对于前端初学者比较友好。一个Vue文件的结构和原生HTML保持了高度......
  • vue---操作状态
    VUE更改VUEX状态:简单示例代码:importVuefrom'vue';importVuexfrom'vuex';Vue.use(Vuex);exportdefaultnewVuex.Store({state:{count:0},mutations:{increment(state){state.count++;},d......
  • vue3Cron表达式组件
    npm安装no-vue3-cron引入报错,就直接把代码拿来自己改了no-vue3-cron仓库地址:https://github.com/wuchuanpeng/no-vue3-cronvue-cron.vue<stylelang="scss">.no-vue3-cron-div{.language{position:absolute;right:25px;z-index:1;}.el-tabs{......
  • Ant Design Vue <a-tabs>标签内嵌使用
    <a-tabs :activeKey="activeKey" @change="handleTabChange">        <a-tab-pane v-for="(item, index) in menuList" :key="item.id" :tab="item.name" :index="index">          <div>......
  • vue2子组件拷贝父组件传递的参数
    在Vue2中,父组件向子组件传递参数时,如果参数是对象或数组(即非基本数据类型),那么子组件可以直接修改这个参数,这会影响到父组件的数据。如果你想避免这种情况,你可以让子组件对父组件的传参进行深度拷贝。这样,子组件就可以自由修改拷贝后的参数,而不会影响到父组件的数据。这是一个例......
  • vue3.0项目搭建
    一、安装vue3脚手架卸载vue2脚手架npmuninstall-gvue-cli清除缓存npmcacheclen--force安装最新脚手架npminstall-g@vue/cli查看脚手架版本vue-V二、构建项目创建项目vuecreate项目名选择配置自定义配置,回车上下键选择Linter/......
  • Vue入门
    一、vue官网:https://cn.vuejs.org/index.html1.1Vue的简单概述1.1.1、介绍:Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的......
  • vue升序降序按钮功能实现
    需求:默认升序,悬浮按钮变色,点击按钮下标跟随变化。html<divclass="right"@click="change(item,index)"v-for="(item,index)inbtnList":key="index">{{item.lable}}<divclass="......
  • VueRouter 路由使用
    一安装对应版本的VueRouter二在main.js做相关操作  importVuefrom'vue'importAppfrom'./App.vue'//引入路由配置文件importrouterfrom'./router/index.js'Vue.config.productionTip=false//引入实例对象newVue({ el:"#app",render:h=......
  • Vue2 校验不通过的表单,赋正确的值后,再次校验结果不变
    前言在工作中遇到了这个问题,多次排查,耗费了不少时间才解决这个问题。问题的解决很简单,但发现根本原因还是有点困难,因此在此做个记录,以防忘记。问题发现步骤例如有以下AntDesignVue表单<a-form-modelref="formRef":model="model"><a-form-model-itemlabel="姓名"pr......