vue3 中模板字符串中添加click方法并传参

工作中遇到html字符串拼接出dom结构,并且需要触发事件和传参的场景。借此机会记录一下。

1. 拼接内容

核心是利用htmlonClick属性,触发单击事件,想要传递对象,必须要JSON.stringify(),否则控制台会报错

	// 传递对象const obj = {name: '张三',age: 12}const html = `<span onClick = 'sendObj(${JSON.stringify(obj)})'>传递参数</span>`
2. methods 内容

因为我是vue3组合式API,所以你可以根据你项目情况创建函数

	const sendObj = (value) => {console.log(value)}
3. onMounted内容
	window.sendObj = sendObj

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

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

相关文章

DAY14_FilterListenerAjaxAxiosJsonfastjson综合案例-axios和html交互

目录 1 Filter1.1 Filter概述1.2 Filter快速入门1.2.1 开发步骤1.2.2 代码演示 1.3 Filter执行流程1.4 Filter拦截路径配置1.5 过滤器链1.5.1 概述1.5.2 代码演示1.5.3 问题 1.6 案例1.6.1 需求1.6.2 分析1.6.3 代码实现1.6.3.1 创建Filter1.6.3.2 编写逻辑代码1.6.3.3 测试并抛…

ERROR in unable to locate ‘***/public/**/*‘ glob

前提 自己搭了一个react项目的脚手架&#xff0c;npm包下载一切都很正常&#xff0c;启动的时候突然就报ERROR in unable to locate ***/public/**/* glob这个错误&#xff0c;根据百度分析了一下产生的原因&#xff1a;webpack配置文件中的CopyWebpackPlugin导致的 网上给出的…

【idea工具】idea工具,build的时候提示:程序包 com.xxx.xx不存在的错误

idea工具&#xff0c;build的时候提示:程序包 com.xxx.xx不存在的错误&#xff0c;如下图&#xff0c;折腾了好一会&#xff0c; 做了如下操作还是不行&#xff0c;idea工具编译的时候&#xff0c;还是提示 程序包不存在。 a. idea中&#xff0c;重新导入项目&#xff0c;也还…

Vue+axios如何解决跨域

1、为什么会产生跨域&#xff1f; 出于浏览器的同源策略限制。 同源策略&#xff08;Sameoriginpolicy&#xff09;是一种约定&#xff0c;是浏览器的一种安全机…

从源码角度去深入分析关于Spring的异常处理ExceptionHandler的实现原理

ExceptionHandler的作用 ExceptionHandler是Spring框架提供的一个注解&#xff0c;用于处理应用程序中的异常。当应用程序中发生异常时&#xff0c;ExceptionHandler将优先地拦截异常并处理它&#xff0c;然后将处理结果返回到前端。该注解可用于类级别和方法级别&#xff0c;…

苍穹外卖心得与总结【对比瑞吉】【如何获得铁粉】

对于苍穹外卖项目&#xff0c;从学习课程加复习已经13天了。 对于一名已经学习过SSMLinuxRedis数据库的Java练习生来说&#xff0c;这个项目相对于之前学习的《瑞吉外卖》新增了很多功能和技术&#xff0c;是很值得练手和提升的课程&#xff0c;下面给出自己的一些见解。&#…

django channels实战(websocket底层原理和案例)

1、websocket相关 1.1、轮询 1.2、长轮询 1.3、websocket 1.3.1、websocket原理 1.3.2、django框架 asgi.py在django项目同名app目录下 1.3.3、聊天室 django代码总结 小结 1.3.4、群聊&#xff08;一&#xff09; 前端代码 后端代码 1.3.5、群聊&#xff08;二&#xff09…

nginx配置项目,配置文件及相应linux命令

云服务器安装nginx步骤 安装nginx&#xff1a; yum install nginx 启动nginx&#xff1a; nginx 停止nginx&#xff1a; nginx -s stop 配置文件路径/etc/nginx/conf.d/ 上传配置文件到这个目录下&#xff0c;然后重启nginx 配置文件&#xff08;单云服务器配置单项目&…

uniapp兼容微信小程序和支付宝小程序遇到的坑

1、支付宝不支持v-show 改为v-if。 2、v-html App端和H5端支持 v-html &#xff0c;微信小程序会被转为 rich-text&#xff0c;其他端不支持 v-html。 解决方法&#xff1a;去插件市场找一个支持跨端的富文本组件。 3、导航栏处有背景色延伸至导航栏外 兼容微信小程序和支…

小研究 - JVM 垃圾回收方式性能研究(三)

本文从几种JVM垃圾回收方式及原理出发&#xff0c;研究了在 SPEC jbb2015基准测试中不同垃圾回收方式对于JVM 性能的影响&#xff0c;并通过最终测试数据对比&#xff0c;给出了不同应用场景下如何选择垃圾回收策略的方法。 目录 4 垃圾回收器性能比较 4.1 测试结果 5 结语 …

Ubuntu /dev/loop<0..n>挂载的目录的分析

执行命令df -h lkmaoubuntu:~$ df -h Filesystem Size Used Avail Use% Mounted on udev 1.6G 0 1.6G 0% /dev tmpfs 391M 2.1M 389M 1% /run /dev/sda1 59G 30G 26G 54% / tmpfs 2.0G 0 2.0G 0% /dev/s…

fpga开发--蜂鸣器发出连续不同的音调

描述 使用fpga蜂鸣器连续发出do&#xff0c;re&#xff0c;mi&#xff0c;fa&#xff0c;so&#xff0c;la&#xff0c;xi七个不同的音调&#xff0c;每个音调的持续时间为0.5s。 思路 采用状态机实现音调的转化&#xff0c;当do状态持续了0.5s之后转移到re状态&#xff0c;…

【Git】修改文件版本回退撤销修改删除文件

文章目录 修改文件版本回退git reset语法规则注意 撤销修改情况1&#xff1a;工作区的代码还未add情况2&#xff1a;工作区的代码已经add 但未commit情况3&#xff1a;工作区的代码已经add 并且已经 commit 删除文件 修改文件 Git⽐其他版本控制系统设计得优秀&#xff0c;Git…

【Solr】Solr搜索引擎使用

文章目录 一、什么是Solr?二 、数据库本身就支持搜索啊,干嘛还要搞个什么solr?三、如果我们想要使用solr那么首先我们得安装它 一、什么是Solr? 其实我们大多数人都使用过Solr,也许你不会相信我说的这句话,但是事实却是如此啊 ! 每当你想买自己喜欢的东东时,你可能会打开某…

chatgpt 接口使用(一)

使用api实现功能 参考链接&#xff1a;https://platform.openai.com/examples 安装库&#xff1a; pip3 install openai 例如&#xff1a; import os import openaiopenai.api_key os.getenv("OPENAI_API_KEY") response openai.ChatCompletion.create(model&q…

jenkins 配置git

在linux 中输入 保证git 安装成功 git --version使用查看git 安装目录&#xff08;非源码安装直接用yum 安装的&#xff09; which gitjenkins 中到 系统管理–>全局工具配置–> Git installations 新建一个项目 选择自由风格 源码管理选择 git 如果使用的是码云&a…

SpringBoot多环境开发-配置文件

在Spring Boot中进行多环境开发时&#xff0c;你可以使用配置文件来定义每个环境的属性。Spring Boot提供了一种方便的方式来管理和加载不同环境的配置文件。 以下是一些常见的配置文件命名约定&#xff1a; application.properties: 默认的配置文件&#xff0c;适用于所有环…

JAVASE---运算符

1.算术运算符 基本四则运算符&#xff1a;加减乘除模( - * / %) int a 20; int b 10; System.out.println(a b); // 30 System.out.println(a - b); // 10 System.out.println(a * b); // 200 System.out.println(a / b); // 2 System.out.println(a % b); // 0 --->模…

VS2022和QT混合编程打包发布程序

1.在开始菜单输入 CMD 找到 Qt5.15.2(MSVC 64-bit) 2.输入windeployqt exe所在路径 3.运行完毕后&#xff0c;双击打开exe文件&#xff0c;可能会报错&#xff0c;缺少相关的dll,找到缺少的dll拷贝到运行文件夹下即可。

Springboot与ElasticJob

yaml配置 <dependency><groupId>com.dangdang</groupId><artifactId>elastic-job-lite-spring</artifactId><version>2.1.5</version></dependency><dependency><groupId>org.slf4j</groupId><artifactI…