string中加html代码,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.