vue学习笔记(11)——键盘事件

  1. Vue中常用的按键别名:

回车:enter

删除:delete(捕获“删除”和“退格”键)

退出:esc

空格:space

换行:tab(比较特殊,只能配合keydown使用)

上:up

下:down

左:left

右:right

  1. Vue为提供别名的按键,可以使用安检员是的key值去绑定,但注意要转为kebab-case(短横线命名)

  1. 系统修饰键(用法特殊):ctrl、alt、shift、meta

(1)配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发

(2)配合keydown使用:正常触发事件,按下即触发事件

  1. 也可以使用keyCode去指定具体按键(不推荐)

 showinfo(e){
           if(e.keyCode!==13) return 
            console.log(e.target.value)
        }
  1. Vue.config.keyCodes.自定义键名=键码,可以去性质按键别名

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>学习</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
  <h2>欢迎来到{
    
    {name}}学习</h2>
  <input type="text" placeholder="按下回车提示输入" @keyup.meta="showinfo">
</div>
 
<script type="text/javascript">
Vue.config.productionTip=false
Vue.config.keyCodes.huiche=13//定义了一个别名键
new Vue({
    el:'#root',
    data:{
        name:'尚硅谷'
    },
    methods:{
        showinfo(e){
          // if(e.keyCode!==13) return 
            console.log(e.target.value)
        }
    }
   
})
 
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_54763080/article/details/128832217
今日推荐