今天整理了一些我在做vue项目时遇到的问题，发现一个小问题会导致很多问题(总之很有意思，让我慢慢给你讲)。这个问题是当时处理后端数据时，如何将后端返回的字符串转换成html标签。其实按照vue官网的一个v-html方法，非常简单，当时我也是这么想的。但是我发现了几个问题(官方网站动态渲染任意HTML容易导致XSS攻击的问题我就不说了，这里只是用来渲染数据的):

首先，当我使用v-html将后端字符串转换为html标记时，我发现从该字符串解析的html中设置的样式没有被添加；

第二，当我们使用v-html时，会自动生成一个div标签。有时这个小的div标签可能会影响我们的布局。这个时候你会认为用模板替换div是做不完的，但是很遗憾，我实验完了会给你结果。

Div v-html='' pMan渴望成为一只大牛/p''/Div//页面成功地渲染了我们想要的P标签，但同时它的外围被div标签所包裹。模板v-html='' pMan渴望成为大牛/P ' '/模板//我们想要的P标签没有出现在页面上。

我们先解决第一个问题：

要解决这个问题，我们需要先了解scoped。在vue中，当您向样式标签添加scoped attribute时，该样式标签中的样式将被锁定在当前组件中，以避免混淆我们的样式。如果在项目中为每个样式标签添加限定范围的属性，从某种意义上来说，这相当于实现了样式的模块化。

我为什么要说范围？因为在添加scoped之后，当你引用一些第三方组件，比如swiper，当你想要覆盖它的样式的时候，你会发现它是覆盖不了的，那么我们后面通过v-html介绍的html元素肯定是逃不掉的。此时，我们可以用一种特殊的方式渗透scoped，例如：

样式范围需要穿透的类名{style }/style。是的，就是这个姿势。我们可以通过使用它来达到渗透的效果。让我们在使用scoped时修改其他组件的样式。另一种方法是，您可以编写需要渗透到另一个样式标签中的样式，而无需限定范围。这是可以的，取决于你的个人需求。

接下来，我们解决第二个问题，同时，我们将这个问题转化为如何将html字符串转换为html元素：

在这里，如果我们想把一个html字符串转换成一个html元素，我唯一能想到的方法就是执行DOM操作。在vue中，如果要执行DOM操作，可以使用自定义指令。如果小伙伴不懂自定义说明，可以先去vue的官方文档看看自定义说明是什么。官方网站链接：https://cn.vuejs.org/v2/guide/custom-directive.html.

解决这个问题的一般思路是这样的：我们可以将一个自定义指令绑定到要添加到这个html字符串的元素上，在数据中定义一个htmlStr变量来存储这个字符串，并将其绑定到我们的自定义指令上，然后我们可以在自定义指令中获取这个当前元素的dom节点和我们需要解析的字符串，我们可以通过原生js的innerHtml方法将这个字符串呈现到页面上：

Data () {return {htmlstr : '想当大牛的PMan/p '//你可以把后端的html字符串数据赋给htmlStr}}，Main v-exchangehtml : foo=' html str '//define自定义指令//全局注册自定义指令vue.directive ('exchangehtml '，{bind:function (el，foo) {console.log (El，foo) el.innerhtml=foo.value}})。

从那以后，我们完成了html字符串到我们需要的html元素的直接转换，并添加了它们

摘要

以上是在边肖介绍的vue中将html字符串转换成html后遇到的问题的总结。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！