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里…...
XML Group端口详解
在XML数据映射过程中，经常需要对数据进行分组聚合操作。例如，当处理包含多个物料明细的XML文件时，可能需要将相同物料号的明细归为一组，或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码，增加了开…...
未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？
编辑：陈萍萍的公主一点人工一点智能 未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战，在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
可靠性+灵活性：电力载波技术在楼宇自控中的核心价值
可靠性灵活性：电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中，电力载波技术（PLC）凭借其独特的优势，正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据，无需额外布…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述：iview使用table 中type: "index",分页之后 ，索引还是从1开始，试过绑定后台返回数据的id, 这种方法可行，就是后台返回数据的每个页面id都不完全是按照从1开始的升序，因此百度了下，找到了…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...
相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式：dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一，腐蚀跟膨胀属于反向操作，膨胀是把图像图像变大，而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...
SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍： img 属性指定分区存放的 image 名称，指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件，则以 proj_name:binary_name 格式指定文件名， proj_name 为工程 名&…...
【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制
目录 节点的功能承载层（GATT/Adv）局限性： 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能，如 Configuration …...