PHP Laravel NGINX Symfony Dubbo Bootstrap Python Symfony Apache Protobuf linux Spring Django ASP Thrift Slim Typescript Docker Homestead MySQL Redis Git SVN ssh Root vim java scala sass less PHP Avro android html Golang Vue Angular React NGINX kotlin Rust Javascript

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

原创

原创不易 ~ 喜欢请点我关注

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

正在加载验证码......
请先完成验证