6. Vue 按键修饰符

在监听键盘事件时,我们经常需要检查常见的键值。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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容