使用事件代理解决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代码如下:

<div @click="eventTemp">
     <span v-html="content"></span>
</div>
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);  //调用点击事件方法
  }
},
上一篇:026、xpath 定位05:模糊定位contains


下一篇:67:内网安全-域横向smb&wmi明文或hash传递