PHP Laravel NGINX html css Bootstrap Python Symfony Apache Windows linux jquery Django ASP vanilla Slim vagrant docker Homestead MySQL Redis Git SVN ssh Root vim PhpStorm Pycharm sass less PHP Laravel android html css Vue Angular React NGINX html css 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%; }

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