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字符串中綁定事件就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue導(dǎo)入excel表,導(dǎo)入失敗的數(shù)據(jù)自動(dòng)下載
本文詳細(xì)講解了Vue導(dǎo)入excel表,導(dǎo)入失敗的數(shù)據(jù)自動(dòng)下載的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
這篇文章主要為大家詳細(xì)介紹了vue集成百度UEditor富文本編輯器的使用教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
vue使用vue-i18n實(shí)現(xiàn)國際化的實(shí)現(xiàn)代碼
本篇文章主要介紹了vue使用vue-i18n實(shí)現(xiàn)國際化的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
Vue Element前端應(yīng)用開發(fā)之前端API接口的封裝
對(duì)整個(gè)系統(tǒng)來說，一般會(huì)有很多業(yè)務(wù)對(duì)象，而每個(gè)業(yè)務(wù)對(duì)象的API接口又有很多。我們這個(gè)VUE+Element 前端應(yīng)用就是針對(duì)ABP框架的業(yè)務(wù)對(duì)象，因此前端的業(yè)務(wù)對(duì)象接口也是比較統(tǒng)一的，那么可以考慮在前端中對(duì)后端API接口調(diào)用進(jìn)行封裝，引入ES6的方式進(jìn)行前端API的抽象簡化。2021-05-05
vue自定義開發(fā)滑動(dòng)圖片驗(yàn)證組件
這篇文章主要為大家詳細(xì)介紹了vue自定義開發(fā)滑動(dòng)圖片驗(yàn)證組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue學(xué)習(xí)筆記之Vue中css動(dòng)畫原理簡單示例
這篇文章主要介紹了vue學(xué)習(xí)筆記之Vue中css動(dòng)畫原理,結(jié)合簡單實(shí)例形式分析了Vue中css樣式變換動(dòng)畫效果實(shí)現(xiàn)原理與相關(guān)操作技巧,需要的朋友可以參考下2020-02-02
今天小編就為大家分享一篇vue之debounce屬性被移除及處理詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue.js學(xué)習(xí)筆記之綁定style樣式和class列表
數(shù)據(jù)綁定一個(gè)常見需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式。這篇文章主要介紹了vue.js綁定style和class的相關(guān)資料,需要的朋友可以參考下2016-10-10
Vue3源碼分析組件掛載創(chuàng)建虛擬節(jié)點(diǎn)
這篇文章主要為大家介紹了Vue3源碼分析組件掛載創(chuàng)建虛擬節(jié)點(diǎn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
在vue中把含有html標(biāo)簽轉(zhuǎn)為html渲染頁面的實(shí)例
今天小編就為大家分享一篇在vue中把含有html標(biāo)簽轉(zhuǎn)為html渲染頁面的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10