使用事件代理解决v-html点击事件无效

v-html是vue中用来将string形式的html内容按普通HTML插入的命令 - 并且插入的内容不会作为 Vue 模板进行编译 。

项目中遇到的问题：

　　vue用v-html命令解析带有html标签的内容，a标签内有点击事件（格式：<a @click='test()'>我是a标签</a>），但是采用v-html解析标签时会导致点击事件失效

就是前面提到的v-html的特性：将添加进去的@click事件按string形式插入，没有作为 Vue 模板进行编译。

解决方法：

vue代码如下：

?

1 2 3

<div @click="eventTemp">      <span v-html="content"></span> </div>

?

1 2 3 4 5 6 7 8

eventTemp(e){   //在判断事件目标节点的时候，考虑到兼容性应该统一转换成大写或小写进行判断   if (e.target.localName.toLowerCase() === 'a') {     // 通过判端目标节点以后，就能在这里对其进行操作啦。     let id = e.target.getAttribute('data-id')   //获取a标签属性，我这里自定义了一个属性data-id并将id赋值给了该属性，如何需要获取click方法的参数，需要获取a标签的click属性，并手动解析获取里面的参数     this.customFormGet(id);  //调用点击事件方法   } },