vue實(shí)現(xiàn)在v-html的html字符串中綁定事件
更新時(shí)間：2019年10月28日 10:42:07 作者：sayok_why
今天小編就為大家分享一篇vue實(shí)現(xiàn)在v-html的html字符串中綁定事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
需求：
需要在v-html的html字符串的button中綁定點(diǎn)擊事件，需要點(diǎn)擊后做一些操作，必須渲染成html，但是渲染后的html里面寫綁定事件的代碼沒有經(jīng)過vue編譯，所以事件無效。
<div class="code-review">
<div v-html="html" v-highlight @click="addComment($event)"></div>
</div>
computed: {
html () {
return '<button></button >'
},
},
解決辦法：
在v-html同級(jí)元素中使用事件綁定，然后根據(jù)事件觸發(fā)的目標(biāo)對(duì)象去判斷和獲取參數(shù)。
addComment:function (event) {
if(event.target.nodeName === 'BUTTON'){
// 獲取觸發(fā)事件對(duì)象的屬性
alert("a");
}
},
以上這篇vue實(shí)現(xiàn)在v-html的html字符串中綁定事件就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
例如組件使用頻率非常高,幾乎每個(gè)頁(yè)面都在使用便可以封裝成全局組件,下面通過本文給大家介紹Vue3注冊(cè)全局組件的相關(guān)知識(shí),感興趣的朋友一起看看吧2024-01-01
詳解vue+axios給開發(fā)環(huán)境和生產(chǎn)環(huán)境配置不同的接口地址
這篇文章主要介紹了詳解vue+axios給開發(fā)環(huán)境和生產(chǎn)環(huán)境配置不同的接口地址，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue2.6.10+vite2開啟template模板動(dòng)態(tài)編譯的過程
這篇文章主要介紹了vue2.6.10+vite2開啟template模板動(dòng)態(tài)編譯,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
解決在vue項(xiàng)目中,發(fā)版之后,背景圖片報(bào)錯(cuò),路徑不對(duì)的問題
下面小編就為大家分享一篇解決在vue項(xiàng)目中,發(fā)版之后,背景圖片報(bào)錯(cuò),路徑不對(duì)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
websocket實(shí)現(xiàn)的全雙工通信,真真太香了,下面這篇文章主要給大家介紹了關(guān)于前端之vue3使用WebSocket的詳細(xì)步驟,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
使用ElementUI循環(huán)生成的Form表單添加校驗(yàn)
這篇文章主要介紹了使用ElementUI循環(huán)生成的Form表單添加校驗(yàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue 不使用select實(shí)現(xiàn)下拉框功能(推薦)
這篇文章主要介紹了vue 不使用select實(shí)現(xiàn)下拉框功能,在文章給大家提到了vue select 組件的使用與禁用，需要的朋友可以參考下2018-05-05
vue 的keep-alive緩存功能的實(shí)現(xiàn)
本篇文章主要介紹了vue 的keep-alive緩存功能的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
vue data有值,但是頁(yè)面{{}} 取不到值的解決
這篇文章主要介紹了vue data有值,但是頁(yè)面{{}} 取不到值的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Delete `,` 如何解決(vue eslint與prettier沖突)
這篇文章主要介紹了Delete `,` 如何解決(vue eslint與prettier沖突)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10