Vue 中 onclick和@click区别

文章目录

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

一、直接上结论

  • 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.mzph.cn/news/696734.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue3 + Ts (使用lodash)

安装 npm i --save lodash使用 import _ from lodash⚠️报警告&#xff1a;&#xff01;&#xff01;&#xff01; 此时还需要安装ts声明文件库 npm install types/lodash -D安装之后重启Vscode还是会提示上面的警告&#xff0c;此时还需在tsconfig.ts里面配置 {"c…

快速将excel/word表格转换为web页面(html)的方法

前言 在进行开发企业信息化建设的过程&#xff0c;应该有很多这样的场景&#xff0c;就是将现有的电子表格记录的方式转换为在数据系统中进行网页上报。也就是需要根据当前一直使用的表格制作一个上传这个表格信息的网页&#xff0c;如果要减少系统的使用学习成本&#xff0c;…

【Day55】代码随想录之动态规划_买卖股票含冷冻期和手续费

文章目录 动态规划理论基础动规五部曲&#xff1a;出现结果不正确&#xff1a; 1. 最佳买卖股票的时机含冷冻期2. 买卖股票的最佳时机含手续费 动态规划理论基础 动规五部曲&#xff1a; 确定dp数组 下标及dp[i] 的含义。递推公式&#xff1a;比如斐波那契数列 dp[i] dp[i-1…

【Elasticsearch专栏 01】深入探索:Elasticsearch的正向索引和倒排索引是什么

文章目录 什么是Elasticsearch的正向索引和倒排索引&#xff1f;1.倒排索引&#xff08;Inverted Index&#xff09;2.正向索引&#xff08;Forward Index&#xff09;3.小结 什么是Elasticsearch的正向索引和倒排索引&#xff1f; 首先&#xff0c;要明确的是&#xff0c;Ela…

leetcode:78.子集

1.树形结构&#xff1a;往后依次取该数字往后的数字&#xff08;前面的不要取&#xff0c;否则子集会重复&#xff09;&#xff1b;每一层递归的结果都要放入结果集&#xff0c;而并非只放叶子节点。 代码实现&#xff1a; #达到了叶子节点&#xff08;终止条件&#xff09; …

抖音百科词条创建在哪里?

抖音百科就是头条百科&#xff0c;头条百科是一个在线百科全书平台&#xff0c;用户可以在上面创建、编辑和浏览各种百科词条。头条百科词条可以被抖音抓取到&#xff0c;从而获得更多流量和曝光&#xff0c;所以当你创建一个抖音百科词条的时候&#xff0c;就能更加提高自身的…

logbak日志单独打印(方法层级)

logbak日志单独打印 问题 前几天朋友在群里问&#xff0c;怎么针对方法打印打印日志&#xff0c;不是针对类。 解决办法 方法层 GetMapping("getLog1")public String getLog1(){Logger specialLogger LoggerFactory.getLogger(TestController.class.getName() …

人工智能_CPU安装运行ChatGLM大模型_ChatGlm-6B_启动命令行对话_安装API调用接口_005---人工智能工作笔记0100

然后我们再进入 /data/module/ChatGLM-6B-main文件夹 然后我们去启动,命令行工具 python3 cli_demo.py 可以看到也是可以用了. 正常可以用了. 然后主要来看,如何使用api来调用呢,这样才可以,做自己的界面 可以看到就非常简单了只需要: 走到 /data/module/

9-1 A. 图综合练习--构建邻接表

题目描述 已知一有向图&#xff0c;构建该图对应的邻接表。 邻接表包含数组和单链表两种数据结构&#xff0c;其中每个数组元素也是单链表的头结点&#xff0c;数组元素包含两个属性&#xff0c;属性一是顶点编号info&#xff0c;属性二是指针域next指向与它相连的顶点信息。 单…

即时设计和sketch对比

在设计领域&#xff0c;有很多易于使用的设计软件&#xff0c;每个软件都有自己的特点&#xff0c;但在使用中也会有一些限制。例如&#xff0c;传统的Sketch。Sketch是一款古老的UI设计软件。自2010年推出以来&#xff0c;已有10多年的历史&#xff0c;但它始终仅限于MAC。到目…

深入理解Spring Boot Starter:概念、特点、场景、原理及自定义starter

这是目录 **一、引言****二、Spring Boot Starter基本概念****三、Spring Boot Starter的主要特点****四、Spring Boot Starter的应用场景****五、Spring Boot Starter的实现原理****六、自定义spring boot starter****为什么要创建自定义Starter&#xff1f;****创建自定义Spr…

【JS逆向学习】同花顺(q.10jqka)补环境

逆向目标 目标网址&#xff1a;https://q.10jqka.com.cn/ 目标接口&#xff1a; https://q.10jqka.com.cn/index/index/board/all/field/zdf/order/desc/page/3/ajax/1/ 目标参数&#xff1a;cookie 逆向过程 老规矩&#xff0c;先分析网络请求&#xff0c;发现是 cookie 加…

matlab代码--基于matlabLDPC-和积译码系统

LDPC编码 一个码长为n、信息位个数为k的线性分组码&#xff08;n,k&#xff09;可以由一个生成矩阵 来定义&#xff0c;信息序列 通过G被映射到码字XS.G。线性分组码也可以由一个校验矩阵 来描述。所以码字均满足 。校验矩阵的每一行表示一个校验约束 &#xff0c;其中所有的非…

一文吃透计算机网络面试八股文

面试网站&#xff1a;topjavaer.cn 目录&#xff1a; 网络分层结构三次握手两次握手可以吗&#xff1f;四次挥手第四次挥手为什么要等待2MSL&#xff1f;为什么是四次挥手&#xff1f;TCP有哪些特点&#xff1f;说说TCP报文首部有哪些字段&#xff0c;其作用又分别是什么&…

Autochip rtos videoin enqueuedequeue

vBackcarMainTask 目录 xBCModulesInit 初始化videoin xVideoinHwInit 初始创建mipi 初始化线程 vis_init 初始化g_vis_ctrl 配置mipi 初始化参数 xVideoinFillParam获取sensor驱动配置的分辨率 xVideoinHwGetInfo 配置分辨率 vendor/autochips/proprietary/tinysys/vis…

python第七节:条件、循环语句(1)

条件语句 语法&#xff1a; 基本语法1&#xff1a; if 判断条件&#xff1a; 执行语句…… else&#xff1a; 执行语句…… 基本语法2&#xff1a; if 判断条件1: 执行语句1…… elif 判断条件2: 执行语句2…… elif 判断条件3: 执行语句3…… else: 执行语句4…… 如何…

电阻知识详解

基本介绍 电阻阻碍电流流动&#xff1a;只要有电流流过电阻&#xff0c;就会产生功率损耗 基本单位&#xff1a;欧姆&#xff0c;Ω 换算单位&#xff1a;微欧&#xff08;uΩ&#xff09;、毫欧&#xff08;mΩ&#xff09;、千欧&#xff08;kΩ&#xff09;、兆欧&#x…

Python在生物信息学中的应用:序列化Python对象

我们需要将Python对象序列化为字节流&#xff0c;这样就可以将其保存到文件中、存储到数据库中或者通过网络连接进行传输。 解决方案 序列化最普遍的做法是使用 pickle 模块。为了将一个对象保存到一个文件中&#xff0c;可以这样做&#xff1a; import pickledata ... # Some…

字典树相关例题题解

一.P2580 于是他错误的点名开始了 这道题也类似于模版题&#xff0c;只要我们熟悉插入和查找的过程&#xff0c;一样可以解决&#xff0c;这里只要注意一下第一次出现和其它次出现所输出是不一样的&#xff0c;这里我们只要在查找函数中返回不同的值&#xff0c;这样就可以解决…

GEE案例——计算赶着大米、棉花和小麦等农作物的氨气排放量(含风速计算)

简介 氨气是一种在农业生产中广泛存在的气体,主要是由肥料和畜禽粪便的分解过程中释放出来的。氨气对环境和生物健康造成了负面影响,所以准确计算农作物的氨气排放量非常重要。下面是一个关于如何计算赶着大米、棉花和小麦等农作物的氨气排放量的文档,希望对你有帮助。 第…