Vue 中 onclick和@click区别

北风toto

已于 2024-02-22 09:42:10 修改

阅读量736

点赞数 5

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

于 2024-02-21 14:38:34 首次发布

本文链接：https://blog.csdn.net/m0_46085118/article/details/136211277

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

一、直接上结论
二、验证代码，可直接运行
三、点击结果

一、直接上结论

onclick 只能触发 js的原生方法，不能触发vue的封装方法
@click 只能触发vue的封装方法，不能触发js的原生方法

二、验证代码，可直接运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>探索onclick和@click的区别</title>
</head>
<body>

<!-- 主体区域 -->
<section id="app">
    <button class="clear-completed" onclick="jsMethod()">onclick使用js中的方法</button><br>
    <button class="clear-completed" @click="jsMethod()">@click使用js中的方法</button><br>
    <button class="clear-completed" onclick="vueMethod()">onclick使用vue中的方法</button><br>
    <button class="clear-completed" @click="vueMethod()">@click使用vue中的方法</button>
</section>

<!-- 底部 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    const app = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            vueMethod() {
                console.log("您触发了vue内部方法！")
            }
        }
    })
    function jsMethod() {
        console.log("您触发了js方法！")
    }

</script>
</body>
</html>