js 拼接HTML时 onclick方法和传参报错[onject Object] 和 unexpected end of input`
Vue js拼接onclick事件
- 1.onclick 方法函数找不到
- 2.方法中传参
- 2.1 int 类型传参(`直接传参`)
- 2.2 字符串类型(`需要加引号`)
- 2.3 对象(`对象是不能直接拼接的。拼接的必须是字符串。因此需要将对象转成字符串。`)
1.onclick 方法函数找不到
我是拼接的
表格
,点击的<td>
标签;
- 拼接html 并增加onclick事件
//实际列值填充
tablHtml += `<tdοnclick="previewNvrVideo(${data})">${columnItem?.actual}</td>`;
2.页面刚进去 注册点击函数(重要
)
mounted() {//模板参数传参const _this = this;window.previewNvrVideo = (channelNum) => {_this.nvrPreview(channelNum);};
}
3.js 中 写点击函数内容
nvrPreview(data) {//点击之后 实现的逻辑
},
2.方法中传参
2.1 int 类型传参(直接传参
)
tablHtml += `<td οnclick="previewNvrVideo(1)">${columnItem?.actual}</td>`;
2.2 字符串类型(需要加引号
)
1.使用转义字符
tablHtml += `<td οnclick="previewNvrVideo(\'${data}\')"${columnItem?.actual}</td>`;
注意:JS中写法:str2 = '<div onclick="test2(\''+string+'\')">33</div>'
2.使用"
("
是双引号,单引号为'
,但是IE不支持)
tablHtml += `<td οnclick="previewNvrVideo("${data}")"${columnItem?.actual}</td>`;
2.3 对象(对象是不能直接拼接的。拼接的必须是字符串。因此需要将对象转成字符串。
)
报错信息:如果直接使用对象。触发事件时会得到([onject Object])。会引起Uncaught SyntaxError: Unexpected identifier错误
- 将对象拆开,只穿需要传递的参数(参考第二点,需要转义)
- 设置全局变量
- 使用JSON.stringify()将对象转换成json字符串,但是依然会报错
unexpected end of input
,
该错误是因为json字符串的双引号和onclick的双引号冲突,需要将json字符串转成单引号字符串。
JSON.stringify(data).replace(/\"/g,"'");
相关文章:
js 拼接HTML时 onclick方法和传参报错[onject Object] 和 unexpected end of input`
Vue js拼接onclick事件 1.onclick 方法函数找不到2.方法中传参2.1 int 类型传参(直接传参)2.2 字符串类型(需要加引号)2.3 对象(对象是不能直接拼接的。拼接的必须是字符串。因此需要将对象转成字符串。) 1…...
基于springboot实现定时任务,并且添加Event事件处理机制
1、基于Spring-Event增加事件处理机制 import org.bson.Document; import org.springframework.context.ApplicationEvent;/*** 基于Spring-Event增加事件处理机制* create: 2024/4/1-13:33*/ public class SysProductConfigEvent extends ApplicationEvent {// 数据配置priv…...

深入理解数据结构(1):复杂度详解
文章主题:复杂度详解🌱所属专栏:深入理解数据结构📘作者简介:更新有关深入理解数据结构知识的博主一枚,记录分享自己对数据结构的深入解读。😄个人主页:[₽]的个人主页🔥…...

kette介绍-Step之Merge Join
Merge Join介绍 需要配合Sort rows使用,对关联字段进行排序 关联两个step数据,可以是两个不同的数据库表数据,也可以是一张表,一个文件,输出字段为两张表所有字段 注意将小数据集作为first step Join Type有四个选项 INNER对应…...
通俗易懂:MySQL中如何设置只读实例并确保数据一致性?
在MySQL中设置只读实例主要应用于构建高可用性和扩展性的数据库环境,通常是为了分担读取负载或者用于备份和灾难恢复。以下是创建MySQL只读实例并确保数据一致性的基本步骤: 1. 创建并配置只读实例 - 主从复制设置 - 首先,你需要有一个主数…...

一文了解Java核心知识——线程池
介绍 什么是线程池? 管理一系列线程的资源池。当有任务要处理时,直接从线程池中获取线程来处理,处理完之后线程并不会立即被销毁,而是等待下一个任务。 为什么要使用线程池? 池化技术的思想主要是为了减少每次获取资…...

Redis热点Key问题分析与解决
目录 一、问题现象描述 二、什么是热点Key 三、热点Key的危害 3.1 Redis节点负载过高 3.2 Redis集群负载不均 3.3 Redis集群性能下降 3.4 数据不一致 3.5 缓存击穿 四、热点Key产生的原因分析 4.1 热点数据 4.2 业务高峰期 4.3 代码逻辑问题 五、如何检测热点Key …...

深度学习armv8/armv9 cache的原理
快速链接: 【精选】ARMv8/ARMv9架构入门到精通-[目录] 👈👈👈 1、为什么要用cache? ARM 架构刚开始开发时,处理器的时钟速度和内存的访问速度大致相似。今天的处理器内核要复杂得多,并且时钟频率可以快几个数量级。然…...

Python基础之pandas:文件读取与数据处理
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 一、文件读取1.以pd.read_csv()为例:2.数据查看 二、数据离散化、排序1.pd.cut()离散化,以按范围加标签为例2. pd.qcut()实现离散化3.排序4.…...

基于Springboot旅游网站管理系统设计和实现
基于Springboot旅游网站管理系统设计和实现 博主介绍:多年java开发经验,专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文末获取源码联系…...

深度解析C语言——预处理详解
对C语言有一定了解的同学,相信对预处理一定不会陌生。今天我们就来聊一聊一些预处理的相关知识。预处理是在编译之前对源文件进行简单加工的过程,主要是处理以#开头的命令,例如#include <stdio.h>、#define等。预处理是C语言的一个重要…...

idea2023.2.1 java项目-web项目创建-servlet类得创建
如何创建Java项目 1.1 方式1: 1.2 方式: 1.3 方式 如何创建web项目 方式 ----- 推荐 如何创建servlet类 复制6 中得代码 给servlet 配置一个路径 启动tomcat 成功了...

Ollama教程——入门:开启本地大型语言模型开发之旅
Ollama教程——入门:开启本地大型语言模型开发之旅 引言安装ollamamacOSWindows预览版LinuxDocker ollama的库和工具ollama-pythonollama-js 快速开始运行模型访问模型库 自定义模型从GGUF导入模型自定义提示 CLI参考创建模型拉取模型删除模型复制模型多行输入多模态…...

基于PHP的新闻管理系统(用户发布版)
有需要请加文章底部Q哦 可远程调试 基于PHP的新闻管理系统(用户发布版) 一 介绍 此新闻管理系统基于原生PHP开发,数据库mysql,前端bootstrap。系统角色分为用户和管理员。本新闻管理系统采用用户发布新闻,管理员审核后展示模式。 技术栈&am…...

基础篇3 浅试Python爬虫爬取视频,m3u8标准的切片视频
浅试Python爬取视频 1.页面分析 使用虾米视频在线解析使用方式:https://jx.xmflv.cc/?url目标网站视频链接例如某艺的视频 原视频链接 解析结果: 1.1 F12查看页面结构 我们发现页面内容中什么都没有,video标签中的src路径也不是视频的数据。 1.2 …...

Adaboost集成学习 | Matlab实现基于BiLSTM-Adaboost双向长短期记忆神经网络结合Adaboost集成学习时间序列预测(股票价格预测)
目录 效果一览基本介绍模型设计程序设计参考资料效果一览 基本介绍 Matlab实现基于BiLSTM-Adaboost双向长短期记忆神经网络结合Adaboost集成学习时间序列预测(股票价格预测) 模型设计 股票价格预测是一个具有挑战性的时间序列预测问题,可以使用深度学习模型如双向长短期记忆…...
MySQL两表联查之分组成绩第几问题
MySQL 数据库操作实践:两表联查之分组成绩第几问题 在本篇博客中,我将展示MySQL 从创建表、到插入数据,并进行一些复杂的查询操作。 1. 建立表格 首先,我们创建两个表:department(部门)和 em…...

每日一题(leetcode2952):添加硬币最小数量 初识贪心算法
这道题如果整体去思考,情况会比较复杂。因此我们考虑使用贪心算法。 1 我们可以假定一个X,认为[1,X-1]区间的金额都可以取到,不断去扩张X直到大于target。(这里为什么要用[1,X-1]而不是[1,X],总的来说是方便,潜在思想…...
[Errno 2] No such file or directory: ‘g++‘
报错解释: 这个错误表明系统试图访问名为g++的文件或目录,但没有找到。g++是GNU编译器集合(GNU Compiler Collection)中的C++编译器。如果系统中没有安装g++或者g++不在环境变量的路径中,就会出现这个错误。 解决方法: 确认g++是否已安装: 在Linux上,可以尝试运行g+…...

go的通信Channel
一、channel是什么 1.一种通信机制 channel是goroutine与goroutine之间数据通信的一种通信机制。一般都是2个g及以上一起工作。 channel与关键字range和select紧密相关。 二、channel的结构 go源码:GitHub - golang/go: The Go programming language src/runt…...

地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波:可以用来解决所提出的地质任务的波;干扰波:所有妨碍辨认、追踪有效波的其他波。 地震勘探中,有效波和干扰波是相对的。例如,在反射波…...

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法
树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作,无需更改相机配置。但是,一…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展,消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁,不仅优化了客户体验,还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用,并…...
VTK如何让部分单位不可见
最近遇到一个需求,需要让一个vtkDataSet中的部分单元不可见,查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行,是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示,主要是最后一个参数,透明度…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)
本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时,显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...
Spring Boot + MyBatis 集成支付宝支付流程
Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例(电脑网站支付) 1. 添加依赖 <!…...

ubuntu中安装conda的后遗症
缘由: 在编译rk3588的sdk时,遇到编译buildroot失败,提示如下: 提示缺失expect,但是实测相关工具是在的,如下显示: 然后查找借助各个ai工具,重新安装相关的工具,依然无解。 解决&am…...
嵌入式面试常问问题
以下内容面向嵌入式/系统方向的初学者与面试备考者,全面梳理了以下几大板块,并在每个板块末尾列出常见的面试问答思路,帮助你既能夯实基础,又能应对面试挑战。 一、TCP/IP 协议 1.1 TCP/IP 五层模型概述 链路层(Link Layer) 包括网卡驱动、以太网、Wi‑Fi、PPP 等。负责…...
Qt Quick Controls模块功能及架构
Qt Quick Controls是Qt Quick的一个附加模块,提供了一套用于构建完整用户界面的UI控件。在Qt 6.0中,这个模块经历了重大重构和改进。 一、主要功能和特点 1. 架构重构 完全重写了底层架构,与Qt Quick更紧密集成 移除了对Qt Widgets的依赖&…...