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); //调用点击事件方法 } },