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