vue中v-html渲染的html字符串中绑定事件

最新推荐文章于 2024-10-27 21:18:42 发布
置顶 最新推荐文章于 2024-10-27 21:18:42 发布
阅读量3.1k 收藏 3
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42618492/article/details/107788489
版权
本文介绍如何在Vue中使用v-html渲染包含事件绑定的HTML字符串。通过JavaScript事件捕获，为v-html指令所作用的元素添加click事件监听器，从而实现动态绑定DOM元素的事件。示例展示了后台返回的HTML模板代码以及对应的JavaScript方法，最终实现点击事件的功能。
摘要由CSDN通过智能技术生成

最近的项目中，使用得vue作为基础框架。有这样一个需求，后台返回的数据是带有方法的html文本，那么需要通过v-html去渲染出来，并且html的标签上带有绑定事件，事件需要可点击。

那么，这里利用JavaScript事件捕获，通过给使用v-html的标记绑定click事件，捕获到点击的标记。从而实现vue动态绑定dom元素事件的效果；

  • 后台返回的模拟数据：vue模板写法
  •  vue模板写法                                                                                                                                                                              
  • js方法                                                               
  • 页面效果         
最低0.47元/天 解锁文章
Vue.js中使用v-html指令渲染HTML代码
JhzDev的博客
09-28 1363
但是，如果你绑定的是不受信任的内容，请确保在插入HTML之前进行适当的验证和转义，以确保应用的安全性。在Vue中，可以使用v-html指令来渲染包含HTML代码的字符串。在上面的示例中，我们定义了一个Vue实例，并将其绑定到id为"app"的元素上。在Vue的data选项中，我们定义了一个名为htmlCode的变量，它包含了一个包裹在。要使用v-html指令，首先需要在Vue实例中定义一个包含HTML代码的字符串变量。然后，将这个变量绑定到需要渲染HTML的元素上，使用v-html指令。
html页面渲染vue组件,如何强制Vue组件重新渲染？（方法介绍）
weixin_34493012的博客
06-03 510
有时候，依赖 Vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让Vue以正确的方式重新呈现组件呢？强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。 当我们需要重新渲染组件时，只需更 key 的值，Vue 就会重新渲染组件。这是一个非常简单的解决方案。当然，你可能会对其他方式会更感兴趣：简单粗暴的方式：...
vue使用v-html渲染的标签，如何绑定事件？
Dark_programmer的博客
01-25 4918
有的时候，想要根据返回数据用v-html渲染标签，还需要给该标签绑定事件。但是渲染后的html里面写绑定事件的代码没有经过vue编译，所以事件无效。 错误示范如下： //html <div> 下面是使用v-html进行渲染 <div v-html="htmlStr" /> </div> // 数据 data(){ return{ htmlStr: "<p class='p-render' @click='clickHandle'>我是被v-
第十四课 Vue中的HTML及文本渲染
最新发布
weixin_44010641的博客
10-27 472
v-html指令可以在DOM中渲染新的子HTML DOM，Vue官方认为HTML渲染是不安全的，并不建议直接做HTML插入操作。v-text可以将字符渲染进DOM中。
vue 模板字符串里添加html并绑定点击事件
weixin_40141473的博客
07-10 6665
在Vue中，我们经常会使用模板字符串。当然，现在的模板字符串使用方法也越来越多。 在项目中，经常会遇到一个问题，就是需要在模板字符串中，写一个html元素，如下： let contentStr = `<p>我是模板字符串，点击我。</p>` 如果需要在点击该html元素时，触发点击事件，那么把模板字符串改成： let contentStr = `<p onclick="clickFun()">我是模板字符串，点击我。</p>` // 注意，是onc
Vue 使用v-html插入模版，绑定事件v-on:click事件不能触发,以及子组件无法渲染
weixin_40057800的博客
05-18 1万+
在用vue做项目中，发现了一个问题: 当想利用v-html将模板渲染到页面中的时候，发现模板中通过v-on:click绑定的事件不能触发，而且模板中引用的子组件也不能渲染成功 ![v-html模板中用到的子组件audio-play](https://img-blog.csdnimg.cn/20190518160511763.png?x-oss-process=image/watermark,typ...
vue v-html 字符串 动态 渲染模版 v-html 动态组件 添加事件
qq_40774743的博客
09-27 2685
// 1，首先在 webpack 配置中 alias: { 'vue$': 'vue/dist/vue.esm.js' // 内部为正则表达式 vue结尾的 } // 2 在main 中 // new Vue({ // router, // store, // render: h => h(App) // }).$mount("#app") // 3 动态组件demo ...
vue在v-html的html字符串中绑定事件
sayoko06的博客
02-01 1万+
需求： 需要在v-html的html字符串的button中绑定点击事件，需要点击后做一些操作，必须渲染成html，但是渲染后的html里面写绑定事件的代码没有经过vue编译，所以事件无效。 &lt;div class="code-review"&gt; &lt;div v-html="html" v-highlight @click="addComment($event)"&gt;&l...
vue实现在v-html的html字符串中绑定事件
10-16
在Vue.js中，v-html指令允许开发者将HTML字符串渲染到Vue模板中的...通过上述方法，我们可以在Vue中实现在v-html渲染的HTML字符串中绑定和使用事件监听器。这对于处理从后端获取的HTML数据和实现复杂交互是很有帮助的。
vue通过v-html指令渲染的富文本无法修改样式的解决方案
10-15
在Vue.js应用中，`v-html`指令用于将纯HTML字符串插入到DOM中，而不是作为文本内容。然而，当使用`v-html`渲染富文本时，可能会遇到一个问题：无法通过CSS样式表修改这些动态插入的元素样式。这个问题的原因在于Vue...
VUE解决 v-html不能触发点击事件的问题
12-30
背景：后端返前端html格式的数据，前端用v-html解析渲染，如：<a></a>，a标签能成功渲染，但其绑定的事件无法触发。 原因：vue没有将其作为vue的模板解析渲染 解决方案：不用v-html而是component模板编译 上干货： ...
vue 在 v-html 的 html 字符串中绑定事件以及获取 v-html 渲染出来的元素
qq_37672347的博客
12-03 3176
html <div id="father" @click="handleHtml($event)"> <div id="vhtml" v-html="content" /> </div> js 在v-html同级元素中使用事件绑定，然后根据事件触发的目标对象去判断和获取参数。 handleHtml($event) { console.log($even...
vue中点击插入html,如何在Vue中的“ v-html”上绑定点击事件
weixin_35260153的博客
01-15 744
I have a simple example in jsfiddle, as described in the example, I want to insert the element via v-html and then bind the event in the insert element. In addition to adding id operation dom this way...
vue v-html动态添加 html 内容渲染，事件失效（无法从新渲染）
热门推荐
Jesse
10-19 2万+
内容绑定事件（在添加v-html后面添加代码）nextTick 就是节点DOM更新完成后调用 ,假如 v-html里面有一个class=”a”的节点，要在这个DOM上绑定事件，那么this.$nextTick().then(() => { $('.a').on('click',function(){ // 接下来看你了 }) })
vue 简单实验 v-on html事件绑定
xie__jin__cheng的博客
08-23 1046
vue 简单实验 v-on html事件绑定
html 渲染过程详解
qq_42559334的博客
08-22 1390
https://www.cnblogs.com/dojo-lzz/p/3983335.html
解决v-html代码中添加@click点击事件不生效问题
wonderfulgood的博客
06-14 945
解决v-html点击事件不生效问题
v-html渲染给图片添加点击事件
qq_43059898的博客
09-05 1349
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"
vue2v-html渲染
09-19
Vue 2.x 中的 v-html指令用于将HTML字符串直接插入到DOM中，这是一种特殊的数据绑定方式。当你需要动态地渲染包含HTML标签的内容时，比如从服务器返回的数据中包含HTML结构，就可以使用这个特性。v-html会将HTML字符...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值
>