我們知道在 Vue 中，style可以用兩種方式來導入：

// method1

@import ('./a.css');

//method2

復制代碼

但是不管哪一種，導進的css文件都是應用于全局的，有時候我們不想要這樣的效果。而要使得css只對當前的組件有效，即局部應用。vue中提供了scoped屬性，可以很好地解決該問題。

當我們有如下應用場景時，新的問題又出現了：

export default {

data () {

return {

}

},

props: {

mhtml: String

}

}

// some stylesheets to imploy to v-html

復制代碼

該組件中的style如果設置為scoped，那么style不會應用到 v-html中，如果不設置為scoped，那么會污染全局變量，導致不可知的后果。

如何fix呢？官網給出了兩個解決辦法：

In single-file components, scoped styles will not apply to content inside v-html, because that HTML is not processed by Vue’s template compiler. If you want to target v-html content with scoped CSS, you can instead use CSS modules or an additional, global

對于方法一，css module是一個解決全局變量和代碼依賴的規范，原理是對聲明了module的樣式表中的樣式賦予哈希class名， 可以參考 官網以及阮一峰老師的文章

對于方法二，意思是在全局變量中，通過特殊的命名(比如說BEM)來手動約束樣式顯示

可惜，以上都不是我想要的解決方案

在Stack Overflow中找到了第三種解：

可以使用 deep scoped 來實現對v-html的樣式應用，并且不設置為全局

代碼如下：

export default {

data () {

return {

}

},

props: {

mhtml: String

}

}

.markDiv>>>h1,h2,h3,h4,h5,h6{

font-family: "PT Sans","SF UI Display", ".PingFang SC","PingFang SC", "Neue Haas Grotesk Text Pro", "Arial Nova", "Segoe UI", "Microsoft YaHei", "Microsoft JhengHei", "Helvetica Neue", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "Hiragino Sans GB", sans-serif;

text-rendering:optimizelegibility;margin-bottom:1em;font-weight:bold; line-height: 1.8rem;

}

復制代碼

這樣一來， 這些樣式就會影響該組件的子組件，其中的v-html自然也會因之而改變，但又不會『污染』全局，很好地fix我們的問題。

那么，原理是什么呢？

我們在vue-loader的release說明 中，發現從v12.2.0開始，加了這么一個特性：

總結

以上是生活随笔為你收集整理的vue v html安全,vue 中控制v-html 中的样式，但不影响全局的小技巧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。