当前位置: 移动技术网 > IT编程>网页制作>CSS > Vuejs使用scopedstyle为v-html中标签添加CSS样式的方法

Vuejs使用scopedstyle为v-html中标签添加CSS样式的方法

2018年02月08日  | 移动技术网IT编程  | 我要评论
在Vue组件中,我们可以使用<style scoped>标签来添加针对该组件的CSS样式。 <template> <p class=&

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

<template>
    <p class="foo">
        <p v-html="myHtml"></p>
    </p>
</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%; }

如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网