如何给 v-html 渲染出的内容添加样式

版权声明：如果喜欢，就收藏吧 O(∩_∩)O~ https://blog.csdn.net/caseywei https://blog.csdn.net/caseywei/article/details/85247883

在 vue 中，如果要渲染一段 html 内容，可以使用 v-html 标签，渲染出来的内容会带有原来的页面标签和样式，如果想要修改内容里面的样式要怎么做呢？

有的人会说，这还不简单，直接在 style 里面写相应的样式不就完了吗，实际实践过会发现，根本就不行，如果像原来那样直接写的话是根本不起作用的，而且进入调试模式会发现，在每个 class 里面，vue 都给加上了 data-xxxxx 的东西（这一串多出来的东西应该是 vue 的虚拟 DOM 给加上的），那我们就是要给 v-html 里的内容设置样式该怎么做呢，办法也是有的，直接放代码吧

<div class="content" v-html="agreement.content"></div>
1
 .content >>> span{
        width: 100%;
        ...
    }

可以看到，通过在需要设置样式的元素前面加三个箭头就可以实现这个功能了。