1.组件中使用v-html插入标签字符串时,style标签的样式对其不生效
代码
<template>
<div v-html="'<strong>我是strong标签</strong>'"></div>
</template>
<style scoped >
strong {
color: red;
}
</style>
2.因为scope包裹的style会识别dom上的data-v-..这样的标识
插入前的dom上有data-v的标识,插入后的标签没有这个标识所以scope的样式不起效
3.解决办法
去掉styleb标签中的scope 属性,形成组件的全局样式,父dom标签添加class 类名防止影响其他组件的标签
代码
<template>
<div class="global_style" v-html="'<strong>我是strong标签</strong>'"></div>
</template>
<style >
.global_style strong {
color: red;
}
</style>
这样就解决了问题