美文网首页
6. Vue 按键修饰符

6. Vue 按键修饰符

作者: 飞扬code | 来源:发表于2019-06-28 21:59 被阅读0次

在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。

全部的按键别名:

.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

实例:

<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

在日常的页面交互中,我们经常会遇到这种需求:用户输入账号密码后点击 Enter 键、一个多选筛选条件通过点击多选框后自动加载符合选中条件的数据等等。在传统的前端开发中,当我们碰到这种类似的需求时,我们往往需要知道 js 中需要监听的按键所对应的 keyCode,然后通过判断 keyCode 得知用户是按下了那个按键,继而执行后续的操作。

先以.enter为例简单测试

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>v-on:按键修饰符</title>
      <script src="js/vue.js"></script>
   </head>
   <body>
      <div id="app">
         Vue:<input type="text" v-on:keydown.enter="fun1">
      </div>
   </body>
   <script>
      //view model
      new Vue({
         el:"#app",
         methods:{
            fun1:function () {
               alert("按下的是回车");
            }
         }
      });
   </script>
</html>
image.png

也可以写为,效果一样

Vue:<input type="text" @keydown.enter="fun1">
image.png

相关文章

  • 6. Vue 按键修饰符

    在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。 全部的按...

  • Vue 按键修饰符

    按键修饰符 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: