vue指令-v-on按键修饰符
目标: 给键盘事件, 添加修饰符, 增强能力
- 语法:
- @keyup.enter - 监测回车按键
- @keyup.esc - 监测返回按键
更多修饰符
<template>
<div>
<!-- @keyup.enter - 监测回车按键 -->
按回车键发送内容<input @keyup.enter="sendMsg" type="text">
<br>
<!-- @keyup.esc - 监测返回按键 -->
按Esc键清空内容<input @keyup.esc="clearMsg" v-model="msg" type="text">
</div>
</template>
<script>
export default {
data () {
return {
msg:"",
}
},
methods: {
sendMsg(){
console.log('你有新的消息,请注意查收');
},
clearMsg(){
console.log('清空您的消息');
this.msg = ""
}
}
}
</script>
<style>
</style>
总结: 多使用事件修饰符, 可以提高开发效率, 少去自己判断过程