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>
相关推荐
西陵7 分钟前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构
叹一曲当时只道是寻常8 分钟前
vue中添加原生右键菜单
javascript·vue.js
小磊哥er18 分钟前
【前端工程化】前端工作中的业务规范有哪些
前端
旷世奇才李先生22 分钟前
Next.js 安装使用教程
开发语言·javascript·ecmascript
ᥬ 小月亮28 分钟前
webpack基础
前端·webpack
YongGit1 小时前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea2 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学