![2156ec7871440c9567fdc0b760c2e510.png](https://i-blog.csdnimg.cn/blog_migrate/bea9d33afc2dfacc36f8b065e310ebe1.jpeg)
好好学习,天天向上
官方文档事件处理 — Vue.jscn.vuejs.org
![75744d7221169b4a8d767b1af4e77caf.png](https://i-blog.csdnimg.cn/blog_migrate/f892a36f9a1a119d58dad3fd1624ed95.png)
系统按键指的是 ctrl 、alt 、shift 等按键
像 ctrl 键平常使用并没有什么功能,那常用操作中比如 ctrl + c 是复制等功能作用
为什么对单独的按键做一些修饰符呢,因为系统按键的操作和我们普通的按键操作略有不同,比如像普通按键数字按键 1 2 3 字母按键 a b c,直接点击就可以生成了,在比如特殊的按键 esc 空格 回车等,虽然本身不是用来输入内容的,但是功能也是靠一点击就执行的
但系统往往不会单独使用的,单独点击系统操作符无效,系统按键通常与其他按键组合使用
.ctrl 修饰符
<div id="app">
<input type="text" @keyup.17.q="fn">
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
fn (event) {
console.log(event);
}
}
});
</script>
上部示例是普通按键的操作方式,ctrl 的 keyCode 是17,这里在单独点击 ctrl 和 q 都可以触发操作,并不是想要的效果
<input type="text" @keyup.ctrl="fn">
![40f57c2b37d1bd640a11a5815d9644f5.png](https://i-blog.csdnimg.cn/blog_migrate/f31f65984962d85c011232d7d9fcd3ee.jpeg)
这个示例,当我们单独点击 ctrl 的时候没有任何操作,但是当加上a b c 这类的操作是可以进行
<input type="text" @keyup.ctrl.q="fn">
这个示例就可以设置只有 ctrl + q 才会去触发
<div id="app">
<input type="text" @keyup.ctrl.q="fn" v-model="inputValue">
</div>
<script src="lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
inputValue: ''
},
methods: {
fn (event) {
// console.log(event);
this.inputValue = '';
}
}
});
</script>
![4c8456799678fb22a6146fff824dda19.gif](https://i-blog.csdnimg.cn/blog_migrate/5e3a786269e09d569a034714d2b047f5.gif)
这个示例就是可以对当前输入内容进行清空,通过 v-model 指令进行双向数据绑定,this去操作当前实例并访问内部储存的数据 inputValue 将这个数据进行清空