vue采坑之——vue里面渲染html 并添加样式

在工作中，有次遇到要把返回的字符串分割成两部分，一部分用另外的样式显示。

这时候，我想通过对得到字符串进行处理，在需要特别样式的字符串片段用html标签（用的span）包裹起来再通过变量绑定就好了。不过此时绑定变量的vue指令要用v-html。

测试方案的过程很顺利。不过后面单独为自动添加的标签（span）设定需要的css样式时（直接在vue单页面的css区域加的样式），并没有起作用，浏览器检查元素style特性也没有看到设定的属性。这就很头大了。无奈，去网上去搜搜看有没有别人可以借鉴的经验，没想到很快就找到了。废话不多说，解决方案如下：

1、scoped属性导致css仅对当前组件生效（用css3的属性选择器+生成的随机属性实现的），而html绑定渲染出的内容可以理解为是子组件的内容，子组件不会被加上对应的属性，所以不会应用css.解决的话把scoped属性去掉就行了

生成的随机属性就是类似于data-v-146ebe36的东西。 vue中scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式，使用了data-v-hash的方式来使css有了它对应模块的标识，这样写css的时候不需要加太多额外的选择器，方便很多。

2、另外一种常用的方法利用vue的深度作用选择器。要为v-html渲染出中的标签添加CSS样式，我们需要在写样式的时候添加>>>就可以搞定了，如下：

<style scoped>
>>> p {
  font-size: 14px;
  line-height: 28px;
  text-align: left;
  color: rgb(238, 238, 238);
  color: #585858;
  text-indent: 2em;
}
</style>

可以参考另一篇总结比较好的博客文章：https://www.cnblogs.com/goloving/p/9119460.html