当前位置: 首页 > news >正文

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>标签;

  1. 拼接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.使用&quot;&quot;是双引号,单引号为&apos;,但是IE不支持)

tablHtml += `<td οnclick="previewNvrVideo(&quot;${data}&quot;)"${columnItem?.actual}</td>`;

2.3 对象(对象是不能直接拼接的。拼接的必须是字符串。因此需要将对象转成字符串。

报错信息:如果直接使用对象。触发事件时会得到([onject Object])。会引起Uncaught SyntaxError: Unexpected identifier错误

  1. 将对象拆开,只穿需要传递的参数(参考第二点,需要转义)
  2. 设置全局变量
  3. 使用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 类型传参&#xff08;直接传参&#xff09;2.2 字符串类型&#xff08;需要加引号&#xff09;2.3 对象&#xff08;对象是不能直接拼接的。拼接的必须是字符串。因此需要将对象转成字符串。&#xff09; 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):复杂度详解

文章主题&#xff1a;复杂度详解&#x1f331;所属专栏&#xff1a;深入理解数据结构&#x1f4d8;作者简介&#xff1a;更新有关深入理解数据结构知识的博主一枚&#xff0c;记录分享自己对数据结构的深入解读。&#x1f604;个人主页&#xff1a;[₽]的个人主页&#x1f525;…...

kette介绍-Step之Merge Join

Merge Join介绍 需要配合Sort rows使用,对关联字段进行排序 关联两个step数据&#xff0c;可以是两个不同的数据库表数据&#xff0c;也可以是一张表&#xff0c;一个文件&#xff0c;输出字段为两张表所有字段 注意将小数据集作为first step Join Type有四个选项 INNER对应…...

通俗易懂:MySQL中如何设置只读实例并确保数据一致性?

在MySQL中设置只读实例主要应用于构建高可用性和扩展性的数据库环境&#xff0c;通常是为了分担读取负载或者用于备份和灾难恢复。以下是创建MySQL只读实例并确保数据一致性的基本步骤&#xff1a; 1. 创建并配置只读实例 - 主从复制设置 - 首先&#xff0c;你需要有一个主数…...

一文了解Java核心知识——线程池

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

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架构入门到精通-[目录] &#x1f448;&#x1f448;&#x1f448; 1、为什么要用cache? ARM 架构刚开始开发时&#xff0c;处理器的时钟速度和内存的访问速度大致相似。今天的处理器内核要复杂得多&#xff0c;并且时钟频率可以快几个数量级。然…...

Python基础之pandas:文件读取与数据处理

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

基于Springboot旅游网站管理系统设计和实现

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

深度解析C语言——预处理详解

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

idea2023.2.1 java项目-web项目创建-servlet类得创建

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

Ollama教程——入门:开启本地大型语言模型开发之旅

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

基于PHP的新闻管理系统(用户发布版)

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

基础篇3 浅试Python爬虫爬取视频,m3u8标准的切片视频

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

Adaboost集成学习 | Matlab实现基于BiLSTM-Adaboost双向长短期记忆神经网络结合Adaboost集成学习时间序列预测(股票价格预测)

目录 效果一览基本介绍模型设计程序设计参考资料效果一览 基本介绍 Matlab实现基于BiLSTM-Adaboost双向长短期记忆神经网络结合Adaboost集成学习时间序列预测(股票价格预测) 模型设计 股票价格预测是一个具有挑战性的时间序列预测问题,可以使用深度学习模型如双向长短期记忆…...

MySQL两表联查之分组成绩第几问题

MySQL 数据库操作实践&#xff1a;两表联查之分组成绩第几问题 在本篇博客中&#xff0c;我将展示MySQL 从创建表、到插入数据&#xff0c;并进行一些复杂的查询操作。 1. 建立表格 首先&#xff0c;我们创建两个表&#xff1a;department&#xff08;部门&#xff09;和 em…...

每日一题(leetcode2952):添加硬币最小数量 初识贪心算法

这道题如果整体去思考&#xff0c;情况会比较复杂。因此我们考虑使用贪心算法。 1 我们可以假定一个X&#xff0c;认为[1,X-1]区间的金额都可以取到&#xff0c;不断去扩张X直到大于target。&#xff08;这里为什么要用[1,X-1]而不是[1,X],总的来说是方便&#xff0c;潜在思想…...

[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源码&#xff1a;GitHub - golang/go: The Go programming language src/runt…...

手写红黑树【数据结构】

手写红黑树【数据结构】 前言版权推荐手写红黑树一、理论知识红黑树的特征增加删除 二、手写代码初始-树结点初始-红黑树初始-遍历初始-判断红黑树是否有效查找增加-1.父为黑&#xff0c;直接插入增加-2. 父叔为红&#xff0c;颜色调换增加-3. 父红叔黑&#xff0c;颜色调换&am…...

[蓝桥杯练习]通电

kruskal做法(加边) #include <bits/stdc.h> using namespace std; int x[10005],y[10005],z[10005];//存储i点的x与y坐标 int bcj[10005];//并查集 struct Edge{//边 int v1,v2; double w; }edge[2000005]; int cmp(Edge a, Edge b){return a.w < b.w;} int find(i…...

安全算法 - 摘要算法

摘要算法是一种将任意长度的数据转换为固定长度字节串的算法。它具有以下特点和应用。 首先&#xff0c;摘要算法能够生成一个唯一且固定长度的摘要值&#xff0c;用于验证数据的完整性和一致性。无论输入数据有多长&#xff0c;生成的摘要值始终是固定长度的&#xff0c;且即…...

操作系统:动静态库

目录 1.动静态库 1.1.如何制作一个库 1.2.静态库的使用和管理 1.3.安装和使用库 1.4.动态库 1.4.1.动态库的实现 1.4.2.动态库与静态库的区别 1.4.3.共享动态库给系统的方法 2.动态链接 2.1.操作系统层面的动态链接 1.动静态库 静态库&#xff08;.a&#xff09;&…...

车载电子电器架构 —— 局部网络管理汇总

车载电子电器架构 —— 局部网络管理汇总 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明…...

网络安全 | 什么是DDoS攻击?

关注WX&#xff1a;CodingTechWork DDoS-介绍 DoS&#xff1a;Denial of Service&#xff0c;拒绝服务。DDoS是通过大规模的网络流量使得正常流量不能访问受害者目标&#xff0c;是一种压垮性的网络攻击&#xff0c;而不是一种入侵手段。NTP网络时间协议&#xff0c;设备需要…...

[Godot] 3D拾取

CollisionObject3D文档 Camera3D文档 CollisionObject3D有个信号_input_event&#xff0c;可以用于处理3D拾取。 Camera3D也有project_position用于将屏幕空间坐标投影到3D空间。 extends Node3D#是否处于选中状态 var selected : bool false #摄像机的前向量 var front : V…...

知识融合:知识图谱构建的关键技术

目录 一、引言二、知识图谱基础2.1 知识表示三元组属性图 2.2 知识抽取实体抽取关系抽取属性抽取 三、知识融合的核心问题3.1 实体识别与链接实体识别实体链接 3.2 重复实体合并方法示例 3.3 关系融合挑战方法示例 四、知识融合技术深度解析4.1 基于规则的方法规则设计原则规则…...

外贸建站:WordPress搭建外贸独立站零基础自建站完整教程(2024)

对于做外贸来说&#xff0c;拥有自己的外贸独立网站真的非常重要。在外贸领域&#xff0c;如今各平台竞争激烈&#xff0c;规则多&#xff0c;成本高&#xff0c;价格战、政策变化快&#xff0c;还存在封店风险等等因素。在这种情况下&#xff0c;拥有外贸独立站就能很好规避上…...

【教程】Kotlin语言学习笔记(五)——Lambda表达式与条件控制

写在前面&#xff1a; 如果文章对你有帮助&#xff0c;记得点赞关注加收藏一波&#xff0c;利于以后需要的时候复习&#xff0c;多谢支持&#xff01; 【Kotlin语言学习】系列文章 第一章 《认识Kotlin》 第二章 《数据类型》 第三章 《数据容器》 第四章 《方法》 第五章 《L…...

学做网站需要多长时间/公司网站建设

如何让报表中的Table按自己的需要来分页&#xff1f;例如&#xff0c;每20行就强制分页。 方法&#xff1a; 1. 在Table中添加一个分组&#xff0c;分组表达式为 (RowNumber("Table1") - 1) / 20 2. 去掉分组组头 3. 在分组属性中选择checkbox "在结尾处分页…...

南宁最新疫情最新消息详细轨迹/湖北seo网站推广

关于set_new_handler(转载)2010-09-05 16:59:37| 分类&#xff1a;学习心得| 标签&#xff1a;|字号大中小订阅当运算符new找不到足够大的连续内存块来为对象分配内存时将会发生什么&#xff1f;一个称为 new-handler的函数被调用。对于new-handler的缺省动作是抛出一个异常。…...

网站源代码上传都需要怎么做/搜外滴滴友链

华为OD机试题 最近更新的博客华为 OD 机试 300 题大纲解压缩算法题目描述输入描述输出描述说明示例一输入输出说明示例二输入输出说明代码编写思路Python 代码实现最近更新的博客 华为od 2023 | 什么是华为od,od 薪资待遇,od机试题清单...

酒店做网站/网站优化内容

关联数组是描述一组键及其关联值时经常使用的一种数据类型&#xff0c;可以说它是所有编程语言的支柱&#xff0c;文章将介绍10个操作PHP关联数组的技巧&#xff0c;熟练运用能帮助你提高开发效率。 【51CTO译文】关联数组是描述一组键及其关联值时经常使用的一种数据类型&…...

网站建设管理意见/谷歌浏览器下载视频

在Windows系统的云虚拟主机内访问站点时&#xff0c;提示如下错误。 问题原因 由于当前服务器为Windows操作系统&#xff0c;但是Windows操作系统不支持PHP脚本语言。 解决方案 Linux操作系统支持PHP语言&#xff0c;可以考虑将云虚拟主机更换为Linux操作系统...

百度关键词优化软件网站/seo外链优化

首先、如果是运行在internet上的系统&#xff0c;并且如果是个涉及到利益性的系统&#xff0c;不可避免的会遭受各种攻击&#xff08;我们公司的很多系统从OS到DB到webapp就实时有收到攻击和破解&#xff09;&#xff0c;所以尽可能保证安全性将不再是架构师和安全部门唯一应该…...