vue 修饰符

1.阻止单击事件冒泡
<a @click.stop='handle'></a>
2.提交事件不再重载页面
<form @submit.prevent='handle'></a>
3.修饰符可以串联
<a @click.stop.prevent='handle'></a>
4.只有修饰符
<form @submit.prevent></a>
5.添加事件监听时使用事件捕获模式
<div @click.capture='handle'></div>
6.只当事件在该元素本身(而不是子元素)触发时触发回调
<div @click.self='handle'></div>
7.只触发一次
<div @click.once='handle'></div>

  1. v-model 默认是同步数据,使用 .lazy 会转变为在 change 事件中同步 ,也就是在失去焦点 或者 按下回车键时才更新
    <input type="text" v-model.lazy="val">
    9.修饰符.number可以将输入转换为Number类型,虽然输入是number,其实是string
    <input type="number" v-model.number="val">
    10.修饰符.trim可自动过滤输入的首位空格
    <input v-model.trim="val">
    11.修饰符.native表示监听的是一个原生事件,监听的是改组件的根元素
    <icon-svg class="icon-svg" @click.native="delDependentModule(index)"/>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 除了常规用法,v-on和v-model指令也支持特殊方式绑定方法,以修饰符的方式实现,通常都是在指令后面用小...
    一只神奇的小绵羊阅读 4,064评论 0 0
  • 事件修饰符 .prevent修饰符 .stop修饰符 .once修饰符 prevent修饰符 用于阻止默认事件行为...
    mcgee0731阅读 2,118评论 0 0
  • 表单修饰符 填写表单,最常用的是什么?input!v-model~而我们的修饰符正是为了简化这些东西而存在的 .l...
    LUOTAOLUOTAO阅读 1,170评论 0 1
  • 目录 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符(实在不知道叫啥名字) 一、表单修饰符...
    alanwhy阅读 4,442评论 0 2
  • 为了方便大家写代码,vue.js给大家提供了很多方便的修饰符,比如我们经常用到的取消冒泡,阻止默认事件等等~ 目录...
    强哥科技兴阅读 4,055评论 0 1