其他分享
首页 > 其他分享> > VUE的事件修饰符,once,prevent,stop,capture,self,passiveVUE的事件修饰符,once,prevent,stop

VUE的事件修饰符,once,prevent,stop,capture,self,passiveVUE的事件修饰符,once,prevent,stop

作者:互联网

今天笔者在学习vue3的时候顺带巩固了下vue的基础,感觉这些还是挺有用的,特此分享给大家。

  1. once,只执行一次
<div v-on:click.once='alert("1")'></div>

2. prevent
阻止默认程序,比如form表单中的summit提交按钮,会自己提交,

<form v-on:submit="alert('who')" action="first_submit" method="get" accept-charset="utf-8">
        first_submit
        get
        <input type="submit" name="">
    </form>

现在的submit会进行数据提交,和跳转

<form v-on:submit.prevent="alert('who')" action="first_submit" method="get" accept-charset="utf-8">
        first_submit
        get
        <input type="submit" name="">
    </form>

prevent,直接不让你提交了,也不跳转,只是执行自己命名的函数,个人觉得这个修饰符使用的并不多,完全可以不做submit,我自己写个click更方便啊!!
3. stop
阻止函数的传递

<div v-on:click='alert("1")' style="width: 100%;height: 45px;background-color: black;">
            <div v-on:click="alert('2')" style='width: 80%;margin-left: 10%;background-color: white;'>
                123
            </div>
        </div>

此时点击子级的div会,先弹出2,再弹出1

标签:prevent,修饰符,stop,submit,提交,once
来源: https://www.cnblogs.com/panwudi/p/16310180.html