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里…...
Python爬虫实战：研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块，用户不点击提交按钮，只要输入框失去焦点，就会提前提示验证码是否正确。 一，模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址：pdf 英文是纯手打的！论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误，若有发现欢迎评论指正！文章偏向于笔记，谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
苍穹外卖--缓存菜品
1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得，如果用户端访问量比较大，数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据，减少数据库查询操作。 缓存逻辑分析： ①每个分类下的菜品保持一份缓存数据…...
[10-3]软件I2C读写MPU6050 江协科技学习笔记（16个知识点）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
Linux云原生安全：零信任架构与机密计算
Linux云原生安全：零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言：云原生安全的范式革命 随着云原生技术的普及，安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测，到2025年，零信任架构将成为超…...
LLM基础1_语言模型如何处理文本
基于GitHub项目：https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken：OpenAI开发的专业"分词器" torch：Facebook开发的强力计算引擎，相当于超级计算器 理解词嵌入：给词语画"…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA：通过低成本全身远程操作学习双手移动操作 传统模仿学习（Imitation Learning）缺点：聚焦与桌面操作，缺乏通用任务所需的移动性和灵活性 本论文优点：（1）在ALOHA…...
Python 包管理器 uv 介绍
Python 包管理器 uv 全面介绍 uv 是由 Astral（热门工具 Ruff 的开发者）推出的下一代高性能 Python 包管理器和构建工具，用 Rust 编写。它旨在解决传统工具（如 pip、virtualenv、pip-tools）的性能瓶颈，同时…...
Linux 中如何提取压缩文件 ？
Linux 是一种流行的开源操作系统，它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间，使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的，要在 …...