Vue 的事件修饰符

最新推荐文章于 2024-01-22 15:44:07 发布

YonChao

最新推荐文章于 2024-01-22 15:44:07 发布

阅读量614

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44141172/article/details/121357033

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Vue 时间修饰符

知识点：

事件修饰符

@click.prevent=“showInfo” 可以阻止默认事件。

.stop 阻止事件冒泡。

.once 事件只触发一次。

.capture 使用事件的捕获模式。

.self 只有event.target是当前操作的元素时才触发事件。

.passive 事件的默认行为立即执行，无需等待时间回调执行完毕。

需求：一个超链接包裹了一个监听事件，点击之后，阻止原来超链接跳转。

<body>
    <!-- 
        事件修饰符
        @click.prevent="showInfo" 可以阻止默认事件。
              .stop 阻止事件冒泡。
              .once 事件只触发一次。
              .capture 使用事件的捕获模式。
              .self 只有event.target是当前操作的元素时才触发事件。
              .passive 事件的默认行为立即执行，无需等待时间回调执行完毕。
     -->
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <a href="https://www.baidu.com/" @click.prevent="showInfo">点我提示1</a>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: "#root",
            data() {
                return {
                    name: "百度"
                }
            },
            methods: {
                showInfo(e) {
                    alert("同学你好!")
                },
            }
        })
    </script>

</body>

ps:前三个修饰符比较重要且常用。

YonChao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue 的事件修饰符

Vue 时间修饰符知识点：事件修饰符 @click.prevent=“showInfo” 可以阻止默认事件。 .stop 阻止事件冒泡。 .once 事件只触发一次。 .capture 使用事件的捕获模式。 .self 只有event.target是当前操作的元素时才触发事件。 .passive 事件的默认行为立即执行，无需等待时间回调执行完毕。需求：一个超链接包裹了一个监听事件，点击之后，阻止原来超链接跳转。
复制链接

扫一扫