vue 事件修饰符

.stop.prevent.capture.self.once 1 .stop 阻止冒泡修饰符 <div @click="parent">parent<div @click.stop="child">child<div @click="grandson.stop"

wxy270

4006人浏览 · 2018-02-28 11:12:13

wxy270 · 2018-02-28 11:12:13 发布

.stop
.prevent
.capture
.self

.once   
1 .stop  阻止冒泡修饰符

 <div @click="parent">parent
        <div @click.stop="child">child
            <div @click="grandson.stop">grandson</div>
        </div>
    </div>

 parent(){ console.log("parent")},
  child(){console.log("child")},
grandson(e){console.log("grandson")}

点击grandson，不加stop，控制台会出现这样的信息，

2.capture 捕获

 <div @click.capture="parent">parent
        <div @click="child">child
            <div @click="grandson">grandson</div>
        </div>
    </div>

点击grandson，控制台会出现这样的信息，


#####################################################这里是阻止事件传播

 <div @click.capture.stop="parent">parent
        <div @click="child">child
            <div @click="grandson">grandson</div>
        </div>
    </div>

3.once 只执行一次

 <div @click="parent">parent
        <div @click.once="child">child
            <div @click="grandson">grandson</div>
        </div>
    </div>

这里第一次点击grandson三个都出现，但点击第二次的时候child就不出现了

4.self 只点自己身上才运行

 <div @click="parent">parent
        <div @click.self="child">child
            <div @click="grandson">grandson</div>
        </div>
    </div>

5 .prevent 阻止元素发生默认行为
这个代码只会输出parent，不会发生跳转，从而阻止浏览器的默认行为

<a href="www.baidu.com" @click.prevent="parent"></a>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^