vue-插入字符串html代码如何绑定事件平民写法

本人应用场景: 从一大串字符串中识别出所有图片链接并替换成img标签,替换代码如下图:

注意图中 class=”csreplyFAQ”,过会要用到(由于我这里需要遍历出来,又懒不想用动态id,所以用了class,实际操作建议用id).

确定字符串类型html已经插入页面

下面要写一个方法,将a标签绑定上事件,直接上代码吧,并不难理解

reBindImgs(){
  this.$nextTick(()=>{
    let dom=document.getElementsByClassName('csreplyFAQ')
    if(dom.length){
      let arrDom=Array.from(new Set(dom))
      arrDom.forEach(element => {
        element.addEventListener('click',this.showImgList)
      });
    }
  })
},

此方法需要在插入html片段后执行.
需要注意的是addEventListener方法内第二个参数是函数,可以在参数直接写一个方法;也可以调用Vue methods内的方法,但是调用的方法不能传参数,默认参数是MouseEvent.

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理