当前位置:   article > 正文

vue函数@click.prevent使用纪要_vue @click.prevent

vue @click.prevent

背景

vue项目操作中遇到@click.prevent函数,场景特殊(项目中有一个自己封装的组件库,因此所有的样式都统一集成,遇到特殊情况想引入特殊UI风格处理时,部分组件需要样式重调,因此用到@click.prevent)特此纪要。

问题

@click.prevent的作用是什么?

说明

@click.prevent属于vue的内置函数,vue中有很多其他的函数也有很丰富的应用场景,此篇博文思虑再三,仅对@click.prevent进行阐述,有关其他的函数了解,可自行查阅相关资料。

解决方案

@click.prevent函数会阻止触发dom的原始事件,而去执行特定的事件。为了更好的理解@click.prevent函数,引入一个项目中的使用样例以供参考:

<!-- 样例 -->
  // Codding...
  <a class="img-control" v-show="true" @click.prevent="goXxxx()">修改</a>
<!-- 
    解析:
        a标签默认有自己的href属性,触发a标签后他会自动跳转对应的链接地址或执行的函数。
        此处为了嵌套,避免调整样式所以引用了a标签来处理,但又为了避免a标签的属性限制,因此引用了@click.prevent函数阻隔默认的操作。
        (此处还想做一些延伸说明,但目前没有太多的案例来很好的说明,后续再做更新,目前只到这里)
 -->
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

vue还有几个常用的函数,如:@keyup.enter(enter回车事件)等等。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/羊村懒王/article/detail/79401
推荐阅读
相关标签
  

闽ICP备14008679号