vue事件修饰符

vue事件修饰符

1、目标

在事件后面.修饰符名-给事件带来强大功能

2、语法

@事件名.修饰符="methods里的函数"

修饰符列表

  • .stop - 阻止事件冒泡
    示例:
bash 复制代码
<template>
  <div id="app">
    <div @click="fatherFn">
      <p @click="oneFn">.stop事件-阻止冒泡</p>

    </div>
  </div>
  
</template>

<script>


export default {
  //定义函数
  methods:{
    fatherFn(){
      console.log("father-触发了点击事件")

    },
    oneFn(){
      console.log("P标签点击了") 
    }
  }
  
}
</script>
  • .prevent -阻止默认行为
    示例:
bash 复制代码
<template>
  <div id="app">
    <div @click="fatherFn">

      <a href="http://www.baidu.com" @click.prevent.stop>去百度</a>

    </div>
  </div>
  
</template>

<script>


export default {
  //定义函数
  methods:{
    fatherFn(){
      console.log("father-触发了点击事件")

    },
  }
  
}
</script>
  • .once -程序运行期间,只触发一次事件处理函数。
    示例:
bash 复制代码
<template>
  <div id="app">
    <div >

      <p @click.once="twoFn">点击观察事件处理函数执行几次</p>

    </div>
  </div>
  
</template>

<script>


export default {
  //定义函数
  methods:{
    fatherFn(){
      console.log("father-触发了点击事件")

    },
    twoFn(){
      console.log("p标签被点击了")
    }
  }
  
}
</script>
相关推荐
JS.Huang2 分钟前
【JavaScript】构造函数与 new 运算符
开发语言·javascript·原型模式
IT_陈寒15 分钟前
Java 17 新特性实战:这5个隐藏功能让你的代码效率提升50%
前端·人工智能·后端
艾小码28 分钟前
2025年组件化开发这样做,效率提升300%
前端·javascript
驭风少年君7 小时前
《搭建属于自己的网站之网页前端学习》基础入门
前端·学习
刘一说8 小时前
深入理解 Spring Boot 嵌入式 Web 容器:从原理到性能调优
前端·spring boot·firefox
你的人类朋友8 小时前
设计模式的原则有哪些?
前端·后端·设计模式
!执行8 小时前
Web3 前端与合约交互
前端·web3·1024程序员节
潘小安9 小时前
跟着 AI 学(二)- Quill 接入速通
前端
十里-9 小时前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
shada9 小时前
从Google Chrome商店下载CRX文件
前端·chrome