Vuejs使用scoped style为v-html中标签添加CSS样式

版权声明：尊重原创喔，转载请注明 https://blog.csdn.net/lgyaxx/article/details/79277944

本文最新版本及更多技术文章请访问我的个人技术博客：

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%; }