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

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

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

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

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

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

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

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

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

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

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

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

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

data(){
    return {
      htmlStr:'<p>渴望成為大牛的男人</p>'   //你可以把后端html字符串?dāng)?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打印出來，以便大家理解，這是打印出來的結(jié)果

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

總結(jié)

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

最新評論