vue中通过v-html添加内容添加样式无效

问题描述：

在使用富文本编辑图文详情的时候，通常会使用v-html引入所编辑的内容，然而，详情显示的样式有时不是我们希望的（尤其是图片，大图会出现溢出内容区域的问题），在<style scope> 中添加样式却并不生效。

原因分析：

以下摘自vue官方文档：

在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS，你可以替换为 CSS Modules 或用一个额外的全局 <style> 元素手动设置类似 BEM 的作用域策略。

解决方法：

使用css中的 >>> 选择器

注：该选择器在less和scss中是无效的（貌似在less中还会报错），应使用css。

示例代码如下：

<template>
    <div class="wap-card">
      <div class="card-title">图文详情</div>
      <div class="notes-cont" style="min-height: 100px" v-html="data.bookDetail">
      </div>
    </div>
</template>

<style scope>
.notes-cont >>> ul > li {
  list-style-type: disc;
  margin-left: 15px;
}
.notes-cont >>> img {
  max-width: 100%;
  height: auto;
}
</style>