vue实现在v-html的html字符串中绑定事件
作者:sayok_why 时间:2023-07-02 16:44:08
需求:
需要在v-html的html字符串的button中绑定点击事件,需要点击后做一些操作,必须渲染成html,但是渲染后的html里面写绑定事件的代码没有经过vue编译,所以事件无效。
<div class="code-review">
<div v-html="html" v-highlight @click="addComment($event)"></div>
</div>
computed: {
html () {
return '<button></button >'
},
},
解决办法:
在v-html同级元素中使用事件绑定,然后根据事件触发的目标对象去判断和获取参数。
addComment:function (event) {
if(event.target.nodeName === 'BUTTON'){
// 获取触发事件对象的属性
alert("a");
}
},
来源:https://blog.csdn.net/sayoko06/article/details/86737467
标签:vue,v-html,html,字符串,绑定事件
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
php 备份数据库代码(生成word,excel,json,xml,sql)
2024-06-05 09:52:42
golang 将[]byte转成16进制的实现
2024-02-17 00:35:03
pytorch 数据处理:定义自己的数据集合实例
2021-09-11 06:10:21
Python figure参数及subplot子图绘制代码
2023-09-14 17:13:00
![](https://img.aspxhome.com/file/2023/4/67814_0s.png)
你知道怎么在淘宝里进行投诉吗?
2008-06-04 12:00:00
![](https://img.aspxhome.com/file/UploadPic/20086/4/2008641267329s.jpg)
MySQL中处理各种重复的一些方法
2024-01-12 17:45:14
Go语言变量与基础数据类型详情
2023-08-30 03:13:16
Active Server Pages 错误 ASP 0201 修复方法
2011-03-06 10:41:00
java正则表达式解析html示例分享
2023-06-13 15:53:42
Python绘图示例程序中的几个语法糖果你知道吗
2021-01-18 17:15:25
![](https://img.aspxhome.com/file/2023/7/127127_0s.jpg)
CSS Hack 汇总快查
2007-11-06 11:48:00
解析Vue2.0双向绑定实现原理
2024-06-05 15:29:32
![](https://img.aspxhome.com/file/2023/9/123139_0s.png)
python利用JMeter测试Tornado的多线程
2022-10-15 12:03:26
![](https://img.aspxhome.com/file/2023/1/68371_0s.jpg)
Javascript技术栈中的四种依赖注入小结
2024-04-18 10:54:08
自己用python做的一款超炫酷音乐播放器
2021-05-26 04:47:35
![](https://img.aspxhome.com/file/2023/2/121502_0s.gif)
python进阶教程之文本文件的读取和写入
2023-08-03 03:27:47
Python+selenium实现截图图片并保存截取的图片
2023-06-03 10:15:59
Python实现的matplotlib动画演示之细胞自动机
2022-05-23 15:49:09
![](https://img.aspxhome.com/file/2023/8/79598_0s.gif)
python实现人脸签到系统
2023-12-21 06:35:05
![](https://img.aspxhome.com/file/2023/6/68476_0s.jpg)
python实战项目scrapy管道学习爬取在行高手数据
2021-03-19 01:27:19
![](https://img.aspxhome.com/file/2023/7/94107_0s.jpg)