微信做网站支付工具,晋中营销型网站建设,谷歌网站排名,网站建设业务流程图Vue 事件修饰符
在 Vue 中#xff0c;事件修饰符允许我们在处理 DOM 事件时添加一些特殊的修饰符#xff0c;以便更方便地控制事件的行为。以下是常用的 Vue 事件修饰符#xff1a;
.stop
.stop 修饰符用于阻止事件冒泡#xff0c;即停止事件在父元素之间的传播。
示例…Vue 事件修饰符
在 Vue 中事件修饰符允许我们在处理 DOM 事件时添加一些特殊的修饰符以便更方便地控制事件的行为。以下是常用的 Vue 事件修饰符
.stop
.stop 修饰符用于阻止事件冒泡即停止事件在父元素之间的传播。
示例
templatediv clickparentClickdiv click.stopchildClickChild Element/div/div
/templatescript
export default {methods: {parentClick() {console.log(Parent clicked);},childClick() {console.log(Child clicked);}}
};
/script.prevent
.prevent 修饰符用于阻止默认的事件行为例如阻止表单提交的默认刷新页面行为。
示例
templateform submit.preventsubmitForm!-- 表单内容 --button typesubmitSubmit/button/form
/templatescript
export default {methods: {submitForm() {// 处理表单提交逻辑}}
};
/script.capture
.capture 修饰符用于将事件监听器添加到父元素上而不是默认的冒泡阶段。
示例
templatediv click.captureparentClickdiv clickchildClickChild Element/div/div
/templatescript
export default {methods: {parentClick() {console.log(Parent clicked);},childClick() {console.log(Child clicked);}}
};
/script.self
.self 修饰符用于限制事件只能由元素自身触发而不包括子元素。
示例
templatediv click.selfparentClickdiv clickchildClickChild Element/div/div
/templatescript
export default {methods: {parentClick() {console.log(Parent clicked);},childClick() {console.log(Child clicked);}}
};
/script
