vue在v-html的html字符串中绑定事件
最近做项⽬,使⽤得vue作为基础框架。有这样⼀个需求,需要给返回来的富⽂本绑定事件,搜了⼀下众说纷纭。⾃⼰摸索了和总结出⼀套⽐较好⽤得⽅式。
利⽤JavaScript事件捕获,通过给使⽤v-html的标记绑定click事件,捕获到点击的标记。从⽽实现vue动态绑定dom元素事件的效果;
代码如下:
富⽂本数据:
"richTextContent": "<p class='testssss' data-innervalue='sadsadsa' data-value='{nasdlkashdashdkjsahdksd}'><span style=\"font-size: 14px;\"></span>Some Wi‑Fi networks are open and you can simply connect for internet access. Other Wi‑Fi n
vue模板写法
<div class="richText" v-html="richTextContent" @click="test"></div>
script⽅法
test (event) {
console.log(event.target.className) // testssss
console.log(deName) // p
if (deName === 'p' && event.target.className === 'testssss') {
// 获取触发事件对象的属性
alert('a')
}
html富文本框}
最终效果
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论