vue中將html字符串轉(zhuǎn)換成html后遇到的問題小結(jié)

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

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

　　第二，當(dāng)我們使用v-html的時(shí)候，是會(huì)自動(dòng)生成一個(gè)div標(biāo)簽的，有時(shí)候這個(gè)小小的div標(biāo)簽可能會(huì)影響到我們的布局，這個(gè)時(shí)候你會(huì)想到用template來替代div不就完事了，可是很不幸，給出我試驗(yàn)后的結(jié)果讓你看看吧

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

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

我們先來解決第一個(gè)問題：

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

　　為什么我要說scoped這個(gè)屬性，因?yàn)樵谀慵恿藄croped之后，當(dāng)你引用一些第三方組件，比如swiper，當(dāng)你想要去覆蓋它的樣式的時(shí)候，你會(huì)發(fā)現(xiàn)覆蓋不了，那么我們后來通過v-html引入的html元素肯定也逃不掉，這個(gè)時(shí)候我們可以通過一種特殊的方式，穿透scoped，比如這樣：

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

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

接下來我們解決第二個(gè)問題，同時(shí)我們把這個(gè)問題轉(zhuǎn)化為如何將一個(gè)html字符串轉(zhuǎn)換為html元素：

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

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

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

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

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

總結(jié)

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

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