vue使用v-html渲染的标签，如何绑定事件？

有的时候，想要根据返回数据用v-html渲染标签，还需要给该标签绑定事件。但是渲染后的html里面写绑定事件的代码没有经过vue编译，所以事件无效。

错误示范如下：

//html
<div>
   下面是使用v-html进行渲染
   <div v-html="htmlStr" />
</div>

// 数据
data(){
	return{
		htmlStr: "<p class='p-render' @click='clickHandle'>我是被v-html进行渲染的</p>"
	}
}


// 方法
clickHandle() {
  console.log("点击了渲染的html标签");
}

点击v-html渲染出来的标签，绑定的方法没有丝毫的反应。确切的说，方法并没有绑定上。那么，该如何解决这个问题呢？

正确示范如下：

//html
<div>
   下面是使用v-html进行渲染
   <div v-html="htmlStr" @click="clickHandle"/>
</div>

// 数据
data(){
	return{
		htmlStr: "<p class='p-render'>我是被v-html进行渲染的</p>"
	}
}

// 方法
clickHandle(e) {
  if (e.target.nodeName == "P") {
    console.log("点击了渲染的html标签");
  }
}

在v-html同级元素中使用事件绑定，然后根据事件触发的目标对象去判断和获取参数。

因为我们渲染的是P标签，因为可以判断，当点击的为P标签时，可执行后续操作