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

最新推荐文章于 2024-08-05 10:28:14 发布
置顶 最新推荐文章于 2024-08-05 10:28:14 发布
阅读量3k 收藏 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方法                                                               
  • 页面效果         
新同学Y
关注
专栏目录
Vue-Vue文本渲染三种方法 {{}}、v-html、v-text
Micky的博客
12-25 1482
{{ }} 将元素当成纯文本输出 v-html v-html会将元素当成HTML标签解析后输出 v-text v-text会将元素当成纯文本输出 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue文本
vue使用v-html渲染的标签，如何绑定事件？
Dark_programmer的博客
01-25 4654
有的时候，想要根据返回数据用v-html渲染标签，还需要给该标签绑定事件。但是渲染后的html里面写绑定事件的代码没有经过vue编译，所以事件无效。 错误示范如下： //html <div> 下面是使用v-html进行渲染 <div v-html="htmlStr" /> </div> // 数据 data(){ return{ htmlStr: "<p class='p-render' @click='clickHandle'>我是被v-
vue渲染函数h()的多种应用场景
最新发布
m0_61924791的博客
08-05 568
h()渲染函数是用来创建虚拟DOM节点vnode。我们在vue项目里面用HTML标签构建页面时最终会被转化成vnode，而h()是直接创建vnode。
vue 模板字符串里添加html并绑定点击事件
weixin_40141473的博客
07-10 6480
在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 2655
// 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字符串中绑定事件
10-16
在Vue.js中，v-html指令允许开发者将HTML字符串渲染到Vue模板中的...通过上述方法，我们可以在Vue中实现在v-html渲染的HTML字符串中绑定和使用事件监听器。这对于处理从后端获取的HTML数据和实现复杂交互是很有帮助的。
VUE解决 v-html不能触发点击事件的问题
12-30
背景：后端返前端html格式的数据，前端用v-html解析渲染，如：<a></a>，a标签能成功渲染，但其绑定的事件无法触发。 原因：vue没有将其作为vue的模板解析渲染 解决方案：不用v-html而是component模板编译 上干货： ...
vue通过v-html指令渲染的富文本无法修改样式的解决方案
10-15
在Vue.js应用中，`v-html`指令用于将纯HTML字符串插入到DOM中，而不是作为文本内容。然而，当使用`v-html`渲染富文本时，可能会遇到一个问题：无法通过CSS样式表修改这些动态插入的元素样式。这个问题的原因在于Vue...
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 字符串中绑定事件以及获取 v-html 渲染出来的元素
qq_37672347的博客
12-03 3116
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 720
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...
html页面渲染vue组件,如何强制Vue组件重新渲染？（方法介绍）
weixin_34493012的博客
06-03 487
有时候，依赖 Vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让Vue以正确的方式重新呈现组件呢？强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。 当我们需要重新渲染组件时，只需更 key 的值，Vue 就会重新渲染组件。这是一个非常简单的解决方案。当然，你可能会对其他方式会更感兴趣：简单粗暴的方式：...
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 1032
vue 简单实验 v-on html事件绑定
html 渲染过程详解
qq_42559334的博客
08-22 1374
https://www.cnblogs.com/dojo-lzz/p/3983335.html
vue html绑定点击事件,vue实现在v-html的html字符串中绑定事件
05-19
在 Vue 中，可以通过 `v-on` 或简写的 `@` 来绑定事件。但是，如果要在 `v-html` 中绑定事件，需要一些特殊的处理。 由于在 `v-html` 中直接绑定事件会被视为字符串而不是代码，因此需要使用 Vue 提供的 `$compile` 方法来编译字符串并将其转换为可执行的代码。具体实现如下： ```html <template> <div v-html="html" ref="container"></div> </template> <script> export default { data() { return { html: '<button @click="handleClick">Click me</button>', }; }, mounted() { this.$nextTick(() => { const container = this.$refs.container; const buttons = container.querySelectorAll('button'); for (let i = 0; i < buttons.length; i++) { const button = buttons[i]; const clickAttr = button.getAttribute('@click'); if (clickAttr) { const fn = this.$compile(`() => { ${clickAttr} }`).bind(this); button.addEventListener('click', fn); } } }); }, methods: { handleClick() { console.log('Button clicked'); }, }, }; </script> ``` 在上面的代码中，我们首先在 `data` 中定义了一个包含 HTML 代码的字符串。然后在模板中使用 `v-html` 将其渲染出来，并在 `mounted` 钩子函数中通过 `$compile` 方法编译出其中的代码并绑定事件。 需要注意的是，由于 `$compile` 方法不会自动绑定 `this`，因此我们需要通过 `bind` 方法将当前实例作为上下文传递给编译出的函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值