vue中將html字符串轉換成html后遇到的問題小結

今天整理之前做vue項目時遇到的一些問題，發(fā)現(xiàn)了當時遇到的一個很小但是又會引出很多問題的一個問題（總之就是很有意思，聽我慢慢給你到來），這個問題就是當時處理后端數(shù)據(jù)時，如何將后端返回來的字符串轉換成html標簽，其實根據(jù)vue官網(wǎng)的一個v-html方法是不是覺得很簡單，當時我也是這樣想的，可是我發(fā)現(xiàn)了幾個問題(官網(wǎng)給出的動態(tài)渲染任意 HTML 容易導致 XSS 攻擊的問題我就不說了，在這里我只是用它來渲染數(shù)據(jù))：

　　第一，當我用v-html將后端字符串轉換成了html標簽后，發(fā)現(xiàn)我在那個字符串中解析出來的html里面設置的樣式?jīng)]有加上；

　　第二，當我們使用v-html的時候，是會自動生成一個div標簽的，有時候這個小小的div標簽可能會影響到我們的布局，這個時候你會想到用template來替代div不就完事了，可是很不幸，給出我試驗后的結果讓你看看吧

<div v-html="'<p>渴望成為大牛的男人</p>'"></div>　　　　　　　　　　　　　　//頁面上成功渲染出了我們想要的p標簽，但同時它的外圍也被一個div標簽包裹著
<template v-html="'<p>渴望成為大牛的男人</p>'"></template>　　　　　　　　//頁面上并沒有出現(xiàn)我們想要的這個p標簽

　　   有沒有發(fā)現(xiàn)一個小小的需求就會帶來很多意想不到的問題，讓我不禁感嘆，代碼的世界真的是神奇啊，廢話不多說，接下來我給出這兩個問題的解法

我們先來解決第一個問題：

　   解決這個問題的開始，我們要先了解一下scoped，在vue中，當你在一個style標簽上加了scoped屬性時，這個style標簽內(nèi)的樣式將會被鎖死在當前這個組件內(nèi)，為的就是避免我們的樣式出現(xiàn)混亂，假如說你的項目中如果每個style標簽上都加了scroped這個屬性，從某種意義上說就相當于實現(xiàn)了樣式的模塊化。

　　為什么我要說scoped這個屬性，因為在你加了scroped之后，當你引用一些第三方組件，比如swiper，當你想要去覆蓋它的樣式的時候，你會發(fā)現(xiàn)覆蓋不了，那么我們后來通過v-html引入的html元素肯定也逃不掉，這個時候我們可以通過一種特殊的方式，穿透scoped，比如這樣：

<style scoped>
 >>>需要穿透的類名 {
 樣式
 }
</style>

　　嗯對，就是這個姿勢，我們使用>>>就可以實現(xiàn)一個穿透效果，讓我們在使用scoped的情況下，去修改其他組件的樣式，還有另外一種方法就是你可以把需要穿透的樣式寫到另一個style標簽中，不加scoped，這樣也可以，看你個人需求。

接下來我們解決第二個問題，同時我們把這個問題轉化為如何將一個html字符串轉換為html元素：

　　 在這里我們可以想將一個html字符串轉換為html元素的話，我想到的辦法就只能進行DOM操作了，在vue中，要進行DOM操作的話，我們可以使用自定義指令，如果有小伙伴對自定義指令不了解的話，可以去vue的官方文檔先看下自定義指令是什么，官網(wǎng)鏈接：https://cn.vuejs.org/v2/guide/custom-directive.html　　　　

　　解決這個問題的大致思路是這樣的：我們可以在要加入這個html字符串的元素綁定一個自定義指令，我們在data中定義一個htmlStr變量用來存儲字符串，綁定到我們的自定義指令上，然后在我們這個自定義指令中我們可以獲取到這個當前這個元素的dom節(jié)點還有我們需要解析的字符串，我們通過原生js的innerHtml方法將字符串渲染到頁面上即可：

data(){
 return {
 htmlStr:'<p>渴望成為大牛的男人</p>' //你可以把后端html字符串數(shù)據(jù)來賦值給htmlStr
 }
 },
<main v-exchangeHtml:foo='htmlStr'> //定義自定義指令
//全局注冊自定義指令
Vue.directive('exchangeHtml',{ 
 bind: function(el,foo){
 console.log(el,foo)
 el.innerHTML += foo.value
 }
})

我把el和foo打印出來，以便大家理解，這是打印出來的結果

自此，我們就完成了直接將html字符串轉換成我們需要的html元素并且添加了進來

總結

以上所述是小編給大家介紹的vue中將html字符串轉換成html后遇到的問題小結 ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com