Vue里给v-html元素添加样式

在Vue组件中，我们可以使用<style scoped>标签来添加针对该组件的CSS样式。

<template>
<div class="foo">
<div v-html="myHtml"></div>
</div>
</template>
<style scoped>
.foo { height: 300px; }
</style>
1
2
3
4
5
6
7
8
而如果在组件中使用了v-html，要为myHtml中的标签添加CSS样式，我们需要在写样式的时候添加>>>：

.foo >>> img { max-width: 100%; }
1
这样，编译时以上CSS才会被编译为

.foo[data-v-xxxxxxx] img { max-width: 100%; }
---------------------
作者：岳小哥
来源：CSDN
原文：https://blog.csdn.net/yanby921005/article/details/79963722
版权声明：本文为博主原创文章，转载请附上博文链接！

转载于:https://www.cnblogs.com/liuxinheng/p/10224577.html