Vuejs使用scoped style爲v-html中標籤添加CSS樣式

本文最新版本及更多技術文章請訪問我的個人技術博客：

http://blog.sbot.io

謝謝大家支持！

---

在Vue組件中，我們可以使用<style scoped>標籤來添加針對該組件的CSS樣式。

<template>
    <div class="foo">
        <div v-html="myHtml"></div>
    </div>
</template>
<style scoped>
    .foo { height: 300px; }
</style>

而如果在組件中使用了v-html，要爲myHtml中的標籤添加CSS樣式，我們需要在寫樣式的時候添加>>>：

.foo >>> img { max-width: 100%; }

這樣，編譯時以上CSS纔會被編譯爲

.foo[data-v-xxxxxxx] img { max-width: 100%; }