Vue 中 onclick和@click区别

news2024/10/6 18:31:49

文章目录

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

一、直接上结论

  • 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>

三、点击结果

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1462823.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数据的结构

数据的结构

数据结构介绍 数据结构是一门介于数学、计算机硬件和计算机软件三者之间的核心课程。数据结构不仅是一般程序设计的基础，而且是设计和实现编译程序、操作系统、数据库系统及其他系统程序和大型应用程序的重要基础。 数据结构研究的是数据对象内部各数据元素之间逻辑关系问题…
阅读更多...
【C++练级之路】【Lv.8】【STL】list类的模拟实现

【C++练级之路】【Lv.8】【STL】list类的模拟实现

快乐的流畅&#xff1a;个人主页 个人专栏&#xff1a;《C语言》《数据结构世界》《进击的C》 远方有一堆篝火&#xff0c;在为久候之人燃烧&#xff01; 文章目录 引言一、结点二、迭代器2.1 成员变量与默认成员函数2.2 operator*2.3 operator->2.4 operator2.5 operator- …
阅读更多...
Go语言中的TLS加密：深入crypto/tls库的实战指南

Go语言中的TLS加密：深入crypto/tls库的实战指南

Go语言中的TLS加密&#xff1a;深入crypto/tls库的实战指南 引言crypto/tls库的核心组件TLS配置&#xff1a;tls.Config证书加载与管理TLS握手过程及其实现 构建安全的服务端创建TLS加密的HTTP服务器配置TLS属性常见的安全设置和最佳实践 开发TLS客户端应用编写使用TLS的客户端…
阅读更多...
[设计模式Java实现附plantuml源码~行为型]遍历聚合对象中的元素——迭代器模式

[设计模式Java实现附plantuml源码~行为型]遍历聚合对象中的元素——迭代器模式

前言&#xff1a; 为什么之前写过Golang 版的设计模式&#xff0c;还在重新写Java 版&#xff1f; 答&#xff1a;因为对于我而言&#xff0c;当然也希望对正在学习的大伙有帮助。Java作为一门纯面向对象的语言&#xff0c;更适合用于学习设计模式。 为什么类图要附上uml 因为很…
阅读更多...
ElasticSearch语法

ElasticSearch语法

Elasticsearch 概念 入门学习: Index索引>MySQL 里的表(table)建表、增删改查(查询需要花费的学习时间最多)用客户端去调用 ElasticSearch(3 种)语法:SQL、代码的方法(4 种语法) ES 相比于 MySQL&#xff0c;能够自动帮我们做分词&#xff0c;能够非常高效、灵活地查询内…
阅读更多...
基于springboot+vue的教学资源库系统(前后端分离)

基于springboot+vue的教学资源库系统(前后端分离)

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…
阅读更多...
Java的编程之旅19——使用idea对面相对象编程项目的创建

Java的编程之旅19——使用idea对面相对象编程项目的创建

在介绍面向对象编程之前先说一下我们在idea中如何创建项目文件 使用快捷键CtrlshiftaltS新建一个模块&#xff0c;点击“”&#xff0c;再点New Module 点击Next 我这里给Module起名叫OOP,就是面向对象编程的英文缩写&#xff0c;再点击下面的Finish 点Apply或OK均可 右键src…
阅读更多...
嵌入式Qt 计算器核心算法_1

嵌入式Qt 计算器核心算法_1

一.表达式分离算法分析 二.分离算法实现 QCalculatorDec.cpp #include "QCalculatorDec.h"#include <QDebug>QCalculatorDec::QCalculatorDec() {m_exp "";m_result "";QQueue<QString> r split("9.11 ( -3 - 1 ) * -5 &…
阅读更多...
SpringCloud Ribbon负载均衡的策略总结及其配置

SpringCloud Ribbon负载均衡的策略总结及其配置

1. 轮询策略 2. 权重轮询策略 3. 随机策略 4. 最少并发数策略 5. 在选定的负载均衡策略基础上重试机制 6. 可用性敏感策略。 7. 区域敏感策略 —————————————————————— Ribbon负载均衡策略的配置&#xff1a; 在application.yml中配置如下&am…
阅读更多...
LeetCode | 两数相加 C语言

LeetCode | 两数相加 C语言

Problem: 2. 两数相加 文章目录 思路解题方法Code一些感想 思路 主要是一一相加和逆序的方式存储 先说逆序储存&#xff0c;看下图 我们先声明出指针p和指针q&#xff0c;还有指针head&#xff08;主要用于return上而已&#xff09;&#xff0c;然后进行一系列操作&#xff0c…
阅读更多...
Disentangled Transfer Learning for Visual Recognition

Disentangled Transfer Learning for Visual Recognition

DTL: Disentangled Transfer Learning for Visual Recognition 论文链接&#xff1a;https://arxiv.org/pdf/2312.07856.pdf源码链接&#xff1a;https://github.com/heekhero/DTL 简介 大规模预训练加微调的框架已经在各个领域推广。但是由于GPU内存或时间预算的原因&#…
阅读更多...
Sora：打开视频创作新纪元的魔法钥匙

Sora：打开视频创作新纪元的魔法钥匙

随着人工智能技术的飞速发展&#xff0c;AI视频模型已成为科技领域的新热点。而在这个浪潮中&#xff0c;OpenAI推出的首个AI视频模型Sora&#xff0c;以其卓越的性能和前瞻性的技术&#xff0c;引领着AI视频领域的创新发展。让我们将一起探讨Sora的技术特点、应用场景以及对未…
阅读更多...
ctfshow web入门 web141-145

ctfshow web入门 web141-145

1.web141 ^\w$表示在开头和末尾匹配字母数字_&#xff0c;传入的v3值不能有字母数字_&#xff0c;即无字母的命令执行 php中1-phpinfo()是可以执行的&#xff0c;加减乘除都可以实现 这里或&#xff0c;异或&#xff0c;取反等运算都可以 这里采用羽师傅的异或脚本生成paylo…
阅读更多...
代码随想录第二十三天 回溯算法 77.组合 216.组合总和 17.电话号码的字母组合

代码随想录第二十三天 回溯算法 77.组合 216.组合总和 17.电话号码的字母组合

回溯算法 LeetCode 77 组合 题目描述 思路 递归函数的返回值以及参数 在这里要定义两个全局变量&#xff0c;一个用来存放符合条件单一结果&#xff0c;一个用来存放符合条件结果的集合。 代码如下&#xff1a; vector<vector<int>> result; // 存放符合条件…
阅读更多...
如何使用Docker本地部署Jupyter+Notebook容器并结合内网穿透实现远程访问

如何使用Docker本地部署Jupyter+Notebook容器并结合内网穿透实现远程访问

文章目录 1. 选择与拉取镜像2. 创建容器3. 访问Jupyter工作台4. 远程访问Jupyter工作台4.1 内网穿透工具安装4.2 创建远程连接公网地址4.3 使用固定二级子域名地址远程访问 本文主要介绍如何在Ubuntu系统中使用Docker本地部署Jupyter Notebook&#xff0c;并结合cpolar内网穿透…
阅读更多...
思科Cisco下输入问号“？”命令help

思科Cisco下输入问号“？”命令help

Cisco CLI &#xff08;Command-Line Interface&#xff09;命令下输入问号“&#xff1f;” 一、在Cisco CLI下&#xff0c;“&#xff1f;”被认为是 – help的帮助命令&#xff0c;当在默认情况下输入“&#xff1f;”&#xff0c;系统会自动识别为 help 命令。 二、那么&a…
阅读更多...
【Java面试系列】Nginx

【Java面试系列】Nginx

目录 为什么要用Nginx&#xff1f;为什么Nginx性能这么高&#xff1f;Nginx 是如何实现高并发的&#xff1f; Nginx怎么处理请求的&#xff1f;Nginx的工作流程 给 favicon.ico 和 robots.txt 设置过期时间; 这里为 favicon.ico 为 99 天,robots.txt 为 7 天并不记录 404 错误日…
阅读更多...
牛B了，GitHub用户免费领空投： TOP 5k 项目的贡献者可领取价值 $200空投。

牛B了，GitHub用户免费领空投： TOP 5k 项目的贡献者可领取价值 $200空投。

StarkNet 公链项目为了激励开发者参与其平台建设&#xff0c;启动了空投活动。 如果曾向 GitHub 上获得较多 Star 的项目提交过 PR &#xff0c;就有资格领取 111.1 STRK 的空投奖励。 只需要使用 OAuth 2.0 登录&#xff0c;就可以直接领取。 领取规则 截止到 2023 年 11 月 …
阅读更多...
【图片公式识别】图片公式转Word与LaTeX文档：智能识别与转换

【图片公式识别】图片公式转Word与LaTeX文档：智能识别与转换

前言 嘿&#xff0c;大家好呀&#xff01;&#x1f44b; 谁都知道&#xff0c;写 Word 文档里的公式可不是一件简单的事情&#xff01;你辛辛苦苦在键盘上敲出的数学公式&#xff0c;结果随着 Word 版本的更新&#xff0c;竟然变成了一张图片&#xff01;&#x1f624; 这简直就…
阅读更多...
客户端web开发工具

客户端web开发工具

文章目录 安全网络Linter-->捕获代码错误-->eslint源代码控制-->Git代码格式化-->Prettier打包工具--Parcel--Webpack 转换--Babel开发后阶段测试工具配置工具其他 node&#xff0c;npm、yarnnode.js包管理器npmyarn https://developer.mozilla.org/zh-CN/docs/Lea…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023