vue 事件

事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

注意

使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。
因此,用 v-on:click.prevent.self 会阻止所有的点击,
而 v-on:click.self.prevent 只会阻止对元素自身的点击。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.事件处理: 这个param可以是javascript代码,可以是方法名,可以是调用js方法(可传值)。 1)监...
    廖马儿阅读 1,924评论 0 0
  • 事件监听 v-on事件监听DOM事件,并在触发时运行JS代码。 例如:计数器增减 完整代码 事件处理方法 v-on...
    JunChow520阅读 695评论 0 0
  • VUE基础之事件处理 v-on:something用于绑定事件监听器,监听DOM变化来触发事件(something...
    Rocky_Wong阅读 429评论 0 6
  • 平静而富有善心的土地 深深地生长着生命的根 那破土的种子 满池的荷花 晒满一地的稻谷 酿造着醇香的曰子 乡村 在一...
    樱子四妹阅读 426评论 2 9
  • 与无字书阅读 214评论 0 0