技術標籤：vuevue

有的時候，想要根據返回資料用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標籤時，可執行後續操作