vue中v-html 后端返回html + script js中click事件不生效
效果图：
需求：点击加号执行后端返回的script中的代码
后端返回的html：
<!DOCTYPE html>
<html lang='zh'>
<head>
<title>xxx</title>
<style>body{font-size: 14px}p{text-indent: 30px;}textarea{width: 100%;}input,textarea{box-sizing: border-box;}label{cursor: pointer;}th{border: none;}td{border-style: solid; border-width: 1px;border-color:rgb(50%,50%,50%);}table{border-collapse: collapse;width:26cm;}td.noneBorder{border-style: none;}.soloInput input{width: 100%;height: 100%;border-style: none none solid none;border-width: 1px}.mixInput span{border-bottom: solid 1px;min-width: 100px;}.addButton div{background-color: #4CAF50;border: none;color: white;padding: 5px 20px;text-align: center;display: inline-block;font-size: 16px;}
</style>
</head>
<body>
<form name="form1">
<table class='outTable'>
<tr><th> </th><td align='center' colspan='3'>类型1</td><td colspan='3' class='soloInput'><span th:if="${pdf}" th:text="${lsLx}"></span><input th:if="${!pdf}" type='text' name='lsLx' th:value="${lsLx}"></td><td align='center' colspan='3'>日期</td><td align='center' colspan='5' class='soloInput'><span th:if='${pdf}' th:text="${nYr}"></span><input th:if="${!pdf}" type='date' name='nYr' th:value="${nYr}"></td></tr>
<tr><th> </th><td align='center' colspan='2' style='border-style:solid solid none solid;'>字段3</td><td align='center' style='border-style:none solid none solid;'>字段4</td><td align='center' rowspan='2' style='border-style:solid solid none solid;'>字段5</td><td align='center' rowspan='2' style='border-style:solid solid none solid;'>字段6</td><td align='center' rowspan='2' style='border-style:solid solid none solid;'>字段7</td><td align='center' colspan='8'>字段8</td></tr>
<tr><th> </th><td align='center' colspan='2' style='border-style:none solid none solid;'>编号</td><td align='center' style='border-style:none solid none solid;'>个数</td><td align='center' colspan='2'>1.0</td><td align='center' colspan='2'>2.0</td><td align='center'>3.0</td><td align='center'>4.0</td><td align='center'>5.0</td><td align='center'>6.0</td></tr>
<th:block th:each="_line_,_stat_ : ${check!=null?check:blankList5}">
<tr><th> </th><td align='center' colspan='2' class='soloInput'><span th:if="${pdf}" th:text="${_line_.item1}"></span><input th:if="${!pdf}" type='text' name='check[].item1' th:value="${_line_.item1}"></td><td align='center' class='soloInput'><span th:if="${pdf}" th:text="${_line_.item2}"></span><input th:if="${!pdf}" type='text' name='check[].item2' th:value="${_line_.item2}"></td><td align='center' class='soloInput'><span th:if="${pdf}" th:text="${_line_.item3}"></span><input th:if="${!pdf}" type='text' name='check[].item3' th:value="${_line_.item3}"></td><td align='center' class='soloInput'><span th:if="${pdf}" th:text="${_line_.item4}"></span><input th:if="${!pdf}" type='text' name='check[].item4' th:value="${_line_.item4}"></td><td align='center' class='soloInput'><span th:if="${pdf}" th:text="${_line_.item5}"></span><input th:if="${!pdf}" type='text' name='check[].item5' th:value="${_line_.item5}"></td><td colspan='2' class='soloInput'><span th:if="${pdf}" th:text="${_line_.item6}"></span><input th:if="${!pdf}" type='text' name='check[].item6' th:value="${_line_.item6}"></td><td colspan='2' class='soloInput'><span th:if="${pdf}" th:text="${_line_.item7}"></span><input th:if="${!pdf}" type='text' name='check[].item7' th:value="${_line_.item7}"></td><td class='soloInput' style='border-style:none solid solid solid;'><span th:if="${pdf}" th:text="${_line_.item8}"></span><input th:if="${!pdf}" type='text' name='check[].item8' th:value="${_line_.item8}"></td><td class='soloInput' style='border-style:none solid solid solid;'><span th:if="${pdf}" th:text="${_line_.item9}"></span><input th:if="${!pdf}" type='text' name='check[].item9' th:value="${_line_.item9}"></td><td class='soloInput' style='border-style:none solid solid solid;'><span th:if="${pdf}" th:text="${_line_.item10}"></span><input th:if="${!pdf}" type='text' name='check[].item10' th:value="${_line_.item10}"></td><td class='soloInput' style='border-style:none solid solid solid;'><span th:if="${pdf}" th:text="${_line_.item11}"></span><input th:if="${!pdf}" type='text' name='check[].item11' th:value="${_line_.item11}"></td></tr>
</th:block>
<tr th:if="${!pdf}">
<th> </th>
<td colspan='14' class="addButton" style="text-align: center;"><div onclick="addcheck(this)">+</div>
<script type="text/javascript">
function addcheck(element){var addTr=element.parentNode.parentNode;var tableEle=addTr.parentNode;var newElement=null;newElement=document.createElement("tr");newElement.innerHTML=" <th> </th> <td align='center' colspan='2' class='soloInput'> <input type='text' name='check[].item1' value=''> </td> <td align='center' class='soloInput'> <input type='text' name='check[].item2' value=''> </td> <td align='center' class='soloInput'> <input type='text' name='check[].item3' value=''> </td> <td align='center' class='soloInput'> <input type='text' name='check[].item4' value=''> </td> <td align='center' class='soloInput'> <input type='text' name='check[].item5' value=''> </td> <td colspan='2' class='soloInput'> <input type='text' name='check[].item6' value=''> </td> <td colspan='2' class='soloInput'> <input type='text' name='check[].item7' value=''> </td> <td class='soloInput' style='border-style:none solid solid solid;'> <input type='text' name='check[].item8' value=''> </td> <td class='soloInput' style='border-style:none solid solid solid;'> <input type='text' name='check[].item9' value=''> </td> <td class='soloInput' style='border-style:none solid solid solid;'> <input type='text' name='check[].item10' value=''> </td> <td class='soloInput' style='border-style:none solid solid solid;'> <input type='text' name='check[].item11' value=''> </td>";tableEle.insertBefore(newElement,addTr);
}
</script>
</td>
</tr>
</table>
</form>
</body>
</html>
现在如果直接用 v-html 放到vue 中 会报错；报这个方法没有；
解决思路：
1.获取到后端返回的html
2.通过正则表达式 之后 截取script 中的 js 逻辑
3.获取body标签 之后创建一个 script 标签
4.把我们截取的 script中的代码放到我们创建的 script标签中
5.把script标签 放到body中
实现：
html部分：
<div v-html="htmlData"></div>vue js部分
export default {
data() {return {htmlData: ""}},mounted() {// 我是取的本地存储的 你换成后端返回的就行this.htmlData = localStorage.getItem('callbackHTML')// 正则匹配const regex = /<script type="text\/javascript">([\s\S]*?)<\/script>/g;// let result = regex.exec(this.htmlData) //获取匹配到的数据// console.log(result);// let result0 = regex.exec(this.htmlData)[0] // 0是带<script
type="text\/javascript"> 这个的// console.log(result);let result1 = regex.exec(this.htmlData)[1]// 1是不带<script type="text\/javascript"> 这个的 我们用1console.log(result1);
//创建script标签let script = document.createElement('script')script.type = 'text/javascript'script.text = result1
//插入到body中document.getElementsByTagName('body')[0].appendChild(script)},
}result1打印结果：
浏览器展示script标签位置：
------------------------------------------------------end----------------------------------------------------------------------
相关文章：
vue中v-html 后端返回html + script js中click事件不生效
效果图： 需求：点击加号执行后端返回的script中的代码 后端返回的html： <!DOCTYPE html> <html langzh> <head> <title>xxx</title> <style>body{font-size: 14px}p{text-indent: 30px;}textarea{width…...
介绍maven生命周期-水温
Maven生命周期是指一系列的构建阶段，包括项目的清理、编译、测试、打包、部署等。Maven通过定义生命周期来规范项目构建过程，使得开发人员可以方便地执行一系列的构建任务。 Maven的生命周期分为三个阶段： clean生命周期：主要用…...
spring boot3.x快速入门
下一篇：Spring Boot 3.x gradle脚手架工程build.gradle详解 本教程将基于gradle项目构建工具来快速构建一个spring boot 3.x的最简单的web应用，其中涉及各种构建技巧和细节，希望能帮到初学者~ 文章目录 先决条件JDK17gradle全局配置 gradle项…...
JavaWeb之servlet关于Ajax实现前后端分离
一、什么是Ajax: AJAX Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部…...
vue3表格组件formatter
有时候在网页上显示表格数据时，表格的某些列值只有有限数目（例如，启用/停用），这时候后端常常使用不同的数据值表示不同状态，前端怎么将这些数据值转化为相应的列值呢？ 我们可以采用vue3表格组件…...
C# 使用NHibernate连接MySQL实现数据的增删改查
使用 NHibernate 连接 MySQL 并实现数据的增删改查操作是一个非常典型的场景。以下是一个简单的示例，演示了如何配置 NHibernate 与 MySQL 连接并进行基本的 CRUD 操作。 目录 步骤 1: 安装必要的包 步骤 2: 配置 NHibernate 配置文件方式 代码方式 步骤 3: 定…...
IDEA2024.2重磅发布，更新完有4G！
JetBrains 今天宣布了其 IDE 家族版本之 2024.2 更新，其亮点是新 UI 现在已是默认设置，并且对 AI Assistant （AI助手）进行了几项改进。 安装密道 新 UI 的设计更加简约，可以根据需要以视觉方式扩展复杂功能。值得开发…...
QWT+Qt Creator+MSVC的配置与使用
目录 一、介绍 二、QWT下载 三、QWT编译 3.1 设置构建套件 3.2 修改QWT相关文件 3.3 进行QWT编译 四、QWT配置 4.1 配置QWT的lib文件 4.2 配置QWT的dll文件 4.3 配置QWT的designer的dll文件 五、代码实验 一、介绍 QWT，全称是Qt Widgets for Technical…...
Netty高性能数据结构
文章目录 Netty高性能数据结构FastThreadLocalHashedWheelTimer时间轮Mpsc无锁队列 Netty高性能数据结构 Netty 用高性能数据结构的主要目的是为了提高网络通信的效率和系统的整体性能。 所谓的高性能数据结构是指，那些在特定场景下优化了性能和效率的数据结构&am…...
关于百度、微软语音合成的实现案例
关键词 自助机产品、排队呼叫功能、网络喇叭、百度语音合成SDK、微软TTS 阅读建议 对自助机产品功能扩展感兴趣的读者、需要实现远程语音呼叫功能的开发者、想要了解网络喇叭选型及其使用的技术人员、对百度语音合成SDK和微软TTS感兴趣的开发者 阅读时长 预计阅读时长…...
二叉树：镜像树,子结构,二叉树转链表,二叉树的倒数K个数,对称，Z型打印
1.把一棵二叉树转换为它的镜像树。 void mirror_tree(TreeNode *root) {if(rootNULL) return ;TreeNode *temproot->right;root->rightroot->left;root->lefttemp;mirror_tree(root->right);mirror_tree(root->left);}2、输入两棵二叉树A，B&…...
瑞秋，詹妮弗·安妮斯顿多年来与本·阿弗莱克保持着“调情”友谊 又一个詹妮弗
尽管所有迹象都表明本阿弗莱克和詹妮弗洛佩兹的婚姻即将走向离婚，但他尚未公开评论此事。不过，好莱坞圈内人士已经纷纷将他与另一位名人联系起来。事实上，是另一位詹妮弗。 一位消息人士向媒体透露，詹妮弗安妮斯顿和阿弗莱克一直都很有默契——无论是在银幕上还是在银幕外…...
指纹失效，忘记iPhone屏幕解锁密码怎么应对？
为保证手机的安全及隐私，我们会给手机设置屏幕锁屏密码，通过输入设置密码来解锁手机屏幕锁，但为了给大家提供快速便捷的解锁方式，苹果公司提供了指纹解锁，不仅解锁更便捷了还极大地增强了设备的安全性。但有时我们手指…...
09.XSS跨站脚本攻击（超详细！！！）
1、什么是XSS XSS（跨站脚本攻击）：攻击者利用这个漏洞将恶意脚本注入到网页中，当其它用户浏览这些页面时，恶意脚本会在用户的浏览器中执行。XSS攻击允许攻击者在用户的浏览器上执行脚本，从而可能获取用户的…...
讲解人工智能在现代科技中的应用和未来发展趋势-水文
人工智能（Artificial Intelligence，简称AI）是一种模拟人类智能的科技领域，它通过计算机模拟人类的思维、学习、推理和决策能力，以便解决复杂的问题。近年来，人工智能技术的发展取得了惊人的进展，…...
2.2 QT 环境配置
2.2 QT环境配置 QT是一个1991年由QT Company开发的跨平台C图形用户界面应用程序开发框架。它既可以开发GUI程序，也可以用于开发非GUI程序，比如控制台工具和服务器。Qt是面向对象的框架，使用特殊的代码生成扩展（称为元对象编译器&…...
2.类和对象（上）
1. 类的定义 1.1 类定义格式 • class为定义类的关键字，Stack为类的名字，{ }中为类的主体，注意类定义结束时后面分号不能省略。类体中内容称为类的成员：类中的变量称为类的属性或成员变量; （类和结构体非常像&#…...
【实际案例】服务器宕机情况分析及处理建议
了解银河麒麟操作系统更多全新产品，请点击访问麒麟软件产品专区：https://product.kylinos.cn 服务器环境以及配置 物理机/虚拟机/云/容器 物理机 外网/私有网络/无网络 私有网络 处理器： Kunpeng 920 内存： 4 TiB BIOS版…...
Linux系统之ncdu命令的基本使用
Linux系统之ncdu命令的基本使用 一、ncdu命令命令介绍1.1 ncdu简介1.2 ncdu特点 二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍 三、检查本地环境3.1 检查本地操作系统版本3.2 检查系统内核版本3.3 检查系统镜像源3.4 更新软件列表 四、安装ncdu工具4.1 安装ncdu软件4.2 n…...
STM32L051K8U6-HAL-LED闪烁设计
HAL三步法： 1、配置下载线 2、配置晶振 3、配置时钟 注意：中断优先级（这里防止HAL_Delay卡死，详细请看 http://t.csdnimg.cn/NQhQV） 4、 配置灯引脚属性为输出模式。并设置标签为LED 生成代码：编写while里…...
后进先出（LIFO）详解
LIFO 是 Last In, First Out 的缩写，中文译为后进先出。这是一种数据结构的工作原则，类似于一摞盘子或一叠书本： 最后放进去的元素最先出来 -想象往筒状容器里放盘子： （1）你放进的最后一个盘子（…...
YSYX学习记录（八）
C语言，练习0： 先创建一个文件夹，我用的是物理机： 安装build-essential 练习1： 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件，随机修改或删除一部分，之后…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课，做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程，它的核心机制是 Goroutine 协程、Channel 通道，并基于CSP（Communicating Sequential Processes࿰…...
【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点，但无自动故障转移能力，Master宕机后需人工切换，期间消息可能无法读取。Slave仅存储数据，无法主动升级为Master响应请求ÿ…...
QT： `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...
RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）
RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发，后来由Pivotal Software Inc.（现为VMware子公司）接管。RabbitMQ 是一个开源的消息代理和队列服务器，用 Erlang 语言编写。广泛应用于各种分布…...
Python 训练营打卡 Day 47
注意力热力图可视化 在day 46代码的基础上，对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...
LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别（二）
在上一篇文章中，我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调，以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后，如何调用这个模型进行人脸情感识别的具体代码实现，包括详细的步骤和注释。 模型调用步骤 环境准备：确保安装了必要的Python库。…...
Python 高级应用10：在python 大型项目中 FastAPI 和 Django 的相互配合
无论是python，或者java 的大型项目中，都会涉及到 自身平台微服务之间的相互调用，以及和第三发平台的 接口对接，那在python 中是怎么实现的呢？ 在 Python Web 开发中，FastAPI 和 Django 是两个重要但定位不…...