vue 事件修饰符1 按键修饰符

最新推荐文章于 2022-11-13 16:15:54 发布

昵称已被占用了了了了

最新推荐文章于 2022-11-13 16:15:54 发布

阅读量179

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/jingge_nihao/article/details/79874732

vue 专栏收录该内容

9 篇文章

订阅专栏

本文通过一个示例展示了如何使用Vue.js来监听键盘事件，包括如何为输入框绑定特定的键盘事件，如按下Enter键、Shift键以及系统级的Meta键等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<style type="text/css">
button{
font-size: 20px;
}
</style>
<body>

<div id="app">

<input type="text" v-on:keyup.enter.space.esc="keyup"></input>
<br/>
<input type="text" v-on:keyup.shift="shift"></input>
<br/>
<input type="text" v-on:keyup.meta="shift"></input>
</div>


</body>

<script type="text/javascript">
new Vue({
el : "#app",
methods : {
/*keyup : function (e) {
if(e.which == 13){
alert('you pressed enter');
}
}*/

keyup : function () {
alert('you pressed enter');
},
shift : function () {
// body...
alert('shift');
}
}
})
</script>

</html>