Vue修饰符

Vue学习笔记 专栏收录该内容
2 篇文章 0 订阅

Vue修饰符

  1. 表单输入修饰符
  2. 事件修饰符
  3. 按键修饰符
  4. 系统修饰符
  5. 鼠标按钮修饰符

表单输入修饰符

修饰符藐视
.lazy焦点离开之后再触发
.number返回数字,而不是数字的字符串
.trim去除输入内容两端的空格

用法

<input type="text"   v-model.lazy="inputValue">
<input type="number" v-model.number="inputValue">
<input type="trim"   v-model.trim="inputValue">

事件修饰符

修饰符描述
.stop可阻止事件冒泡
.prevent可阻止事件的默认行为(如a标签点击后的跳转)
.capture可捕获内部事件并先处理,再由内部事件处理
.self只有当前事件才触发,可用于父组件事件阻止冒泡行为
.once只触发一次事件
.passive提前告知浏览器该事件没有被阻止,优化移动端触屏性能,不能与(.prevent)一起使用

用法

  1. 常规使用
    <button @click.stop="clickButton">click</button>
    
  2. 连续调用
    <a @click.stop.prevent="clickLink">百度</a>
    
  3. 仅修饰符
    <a href="https://www.baidu.com" @click.stop>百度</a>
    

按键修饰符

修饰符描述
.enter捕获Enter键
.tab捕获Tab键
.delete捕获Backspace和Delete键
.esc捕获Esc键
.space捕获Space键
.up捕获上箭头键
.down捕获下箭头键
.left捕获左箭头键
.right捕获又箭头键

用法

<input type="text" @keyup.enter="enterEvent">

系统修饰符

  • .ctrl
  • .alt
  • .shift
  • .meta
  • .exact(用于精确控制事件触发)

可用于按键组合从而触发相应的事件,用法同上。

鼠标按钮修饰符

  • .left
  • .right
  • .middle

用法同上。

  • 0
    点赞
  • 0
    评论
  • 10
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值