vue中使用v-html，v-html中js代码不生效的问题

最新推荐文章于 2024-06-18 13:20:32 发布
最新推荐文章于 2024-06-18 13:20:32 发布
阅读量2w 收藏 22
点赞数 5
分类专栏： 框架 文章标签： v-html中js代码不生效的问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38387487/article/details/88017215
版权

templateContent  是后台返回的html片段，以及css样式和js，但是返回的

js是不执行的，因为浏览器在渲染的时候并没有将js渲染，这时要在$nextTick中动态创建script标签并插入

如图

regJs就是js代码片段，至于怎么获取js代码片段在我的上一篇博客中有，但是别忘了 将this.$nextTick放在一个方法中，并调用，否则 代码不执行   也不会 添加进去啊

老毕姥爷
关注
  • 5
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
关于Vue中v-html引用后js代码失效的记录
A_Y_Y_H_A的博客
11-25 1547
v-html 中 js 失效 问题
使用Vue中 v-for循环列表控制按钮隐藏显示功能
10-17
在Vue.js中，`v-for`指令用于遍历数组或对象，生成一组DOM元素。它是一种非常强大的功能，常用于动态渲染列表。本篇文章将详细讲解如何利用`v-for`循环列表来控制按钮的隐藏与显示，以及如何处理列表内的事件绑定，...
v-html代码中js事件失效问题
吕小威的博客
04-20 647
后端返回的HTML代码： const codeHTML = "<div class=\"table\"><table border=\"0\"><tr><td rowspan='1'>year</td><td><p><span οnclick='view({\"id\":\"6\",\"depId\":\"2022\"})'>2022</span></p></td></t
HTML基础知识
最新发布
m0_64105917的博客
06-18 1211
HTML基础知识
uniapp中使用v-html，v-html中JS代码不生效的问题
麋鹿的鹿
08-09 3308
html5中的规定为了安全起见，不会执行innerHTML中插入的。
自动生成的html触发vue,VUE解决 v-html不能触发点击事件的问题
weixin_28732953的博客
06-01 829
背景：后端返前端html格式的数据，前端用v-html解析渲染，如：，a标签能成功渲染，但其绑定的事件无法触发。原因：vue没有将其作为vue的模板解析渲染解决方案：不用v-html而是component模板编译上干货：我是父组件import Vue from 'vue';var MyComponent = Vue.extend({template: '我是大魔王',methods: {show(...
vue3 vite v-html中运行传统html文档时，js不能运行的解决方案
dugucike的专栏
06-08 1015
用script标签引用的时候路径这么用：/jquery-3.6.4.min.js。2,App.vue中测试使用代码如下:（内容很简单，源码直接上图了）
在html文件中用 script 标签加的程序不执行
qq_24044863的博客
10-25 4679
自己用node写demo的时候遇到的 我的原程序是： <script src=""> $('#login_form').on('submit', function (e) { e.preventDefault() var formData = $(this).serialize() console.log(formData) $.ajax({ url:
VUE解决 v-html不能触发点击事件的问题
10-16
在Vue.js开发过程中，有时候会遇到一个问题，即使用`v-html`指令插入动态HTML内容时，这些内容中的事件监听器（如点击事件）无法正常触发。这是因为Vue.js的模板编译机制不处理`v-html`插入的纯HTML字符串，它们被视...
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
总结来说，当在 `el-tab-pane` 中使用 `v-show` 或 `v-if` 遇到问题时，可以考虑以下几点： 1. 理解 `v-show` 和 `v-if` 的工作原理及其与组件内部实现的交互。 2. 使用 `v-if` 代替 `v-show`，尽管这可能会导致性能...
用v-html解决Vue.js渲染中html标签不被解析的问题
01-19
Vue.js中提供了v-html这个指令来解决这个问题，或者对数据对象使用{{{vm.data}}}三个大括号来包裹对象，就可以正常解析了。 代码改动如下： 总结 以上就是这篇文章的全部内容了，希望本文的内容对大家都 学习或者...
vue通过v-html指令渲染的富文本无法修改样式的解决方案
10-15
在Vue.js应用中，`v-html`指令用于将纯HTML字符串插入到DOM中，而不是作为文本内容。然而，当使用`v-html`渲染富文本时，可能会遇到一个问题：无法通过CSS样式表修改这些动态插入的元素样式。这个问题的原因在于Vue...
vue使用v-html不执行script标签代码解决
weixin_39137100的博客
04-06 1859
正则提取script标签内容及src的值
vue中v-html中的js,vue中v-text / v-html使用实例代码详解
weixin_30586417的博客
06-19 947
废话少说，代码如下所述：Vue实例中的数据,事件和方法new Vue({el:"#root",data:{msg: "world",number:123}})显示123Vue实例中的数据,事件和方法new Vue({el:"#root",data:{content: "hello world",}})补充：vuejs {{}}，v-text 和 v-html的区别{{message}} let a...
【bug】Vue v-html 中js脚本＜script＞标签不生效的问题
weixin_43680337的博客
01-08 5049
现象 想使用v-html 渲染拼接好的元素到vue模板中。 例子如下 定义（写死）的数据 绑定原生的html 这里绑定的content就是我回头要动态生成的html文本，最后渲染在页面上的效果如下： 问题就在于，这里的脚本没有生效。 如果单独搞一个简单的html，虽然代码完全一样却是能生效的： 解决办法 完全搞不清楚为什么页面上明明显示了脚本，却不能生效。我想应该和浏览器的对这段代码段的解析时机有关，可能把谈当做普通的标签加载了。 但是经过各种百度终于找到一...
为什么vue v-html不执行script代码？
細水、長流√的专栏
06-02 3634
问题有个朋友问了个问题：为啥vue中的v-html不会执行中的js代码？比如，给v-html赋予下面这个值，虽然看到DOM中有值，但却不会弹窗。 解释可能他还不知道，这个不是vue的限制，而是html5中的规定。html5中为了安全起见，不会执行innerHTML中插入的的代码。所以，如果想给v-html赋值的代码，虽然能看到在dom中成功展示，但却不会执行中的js代码的。那v-html能否防御xss攻击？既然v-html都不会执行
uniapp v-html不生效
0 error(s), 0 warning(s)
12-14 2366
今天遇到一个问题，后端返回一段富文本，我直接用v-html，结果不生效，以为是collapse组件的问题，结果放在外面还是不生效。
[已解决]关于html的script没有生效的问题
weixin_51443484的博客
11-04 1863
解决javascript不生效
Vue v-html不能触发点击事件的问题（js交互），求助
人与人之间最小的差别是智商，最大的差别是坚持。
10-28 1619
背景：前端保存带有html和js的代码片段，在需要的地方后端返前端html格式的数据，前端用v-html解析渲染，标签能成功渲染（此时可以正常显示静态页面），但其绑定的事件无法触发。 方案一： 方案二： 用了以上方法都不能实现，求做过的大神给予帮助！！！！ ...
VUE2解决 v-html不能触发点击事件不生效问题
05-10
在Vue2中，使用v-html渲染的HTML代码是不会被Vue实例所监听的，因此也就无法触发Vue实例中绑定的点击事件。不过，我们可以通过自定义指令来解决这个问题。 首先，在Vue实例中注册一个自定义指令，用来监听v-html渲染的HTML元素的点击事件： ```js Vue.directive('html-click', { bind: function (el, binding, vnode) { el.addEventListener('click', function () { binding.value(vnode.context) }) } }) ``` 然后，在需要渲染HTML代码的地方，使用v-html指令，并在HTML元素上绑定刚才注册的自定义指令： ```html <div v-html="htmlCode" v-html-click="handleClick"></div> ``` 最后，在Vue实例中定义handleClick方法来处理点击事件： ```js methods: { handleClick: function (context) { // 处理点击事件 } } ``` 这样就可以解决v-html无法触发点击事件的问题了。当用户点击渲染出来的HTML元素时，会触发自定义指令中绑定的点击事件，从而执行Vue实例中定义的handleClick方法。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值