Vuejs使用scoped style为v-html中标签添加CSS样式
在Vue组件中,我们可以使用标签来添加针对该组件的CSS样式。template>div class="foo">div v-html="myHtml">div>div>template>style scoped>.foo { height: 300px; }style>而如果在组件中使用了v-html,要为my
·
本文最新版本及更多技术文章请访问我的个人技术博客:
谢谢大家支持!
在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%; }
更多推荐
已为社区贡献1条内容
所有评论(0)