v-html中标签添加CSS样式

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%; }
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页