|Vue3的v-htm这个特性把我整吐了

文章图片

Vue3的v-html特性是一种渲染html字符串的语法糖，它可以帮助开发者快速渲染html字符串，节省了数据绑定和渲染的时间。 v-html特性主要有以下特点：

1. 快速渲染：v-html特性可以快速渲染html字符串，比如可以通过它把一段html字符串快速渲染到页面上，而不需要再去编写js代码。
2. 可定制：v-html特性可以定制渲染的html字符串，可以根据需要添加属性、样式、文本内容等，提高开发效率。
3. 防止XSS攻击：v-html特性可以防止XSS（跨站脚本）攻击，因为它会过滤掉html字符串中可能存在的攻击性代码，从而保护页面安全。
4. 支持模板：v-html特性还支持模板，可以在html字符串中使用一些模板，从而更加灵活地渲染html字符串。总之， v-html特性是Vue3的一种渲染html字符串的语法糖，可以提高开发效率，防止XSS攻击，并且支持模板，为Vue3提供了一种更加灵活的渲染方式。
OK ， v-htm指令介绍完了，接下来说这个指令有啥问题。

我原先调用discuz!X的内容的时候，用的是dzx自带的数据调用接口，这个接口会生成一个js文件，文件内容大概是这样的：document.write('<div class=\"xxx\"></div> <button onclick=\"xxx(console.log(\\'12138\\')\"></button>') ，这样可以直接引用这个js文件到html对应的位置，直接同步渲染出内容。

但是，原生js中（比如document.write）会直接将被转义的引号转义回去（\\'转义为'），但是v-html不能，最后通过v-html渲染出来的内容，是未被转义的，导致单引号中的内容全部失效（具体表现，就是你点击那个元素没有任何反应）。所以，在用v-html渲染之前，要把内容全部转义回去，再放到v-html中
解决用的代码：
leta =response.data
letb =a.split(\"document.write('\")
letc =b[1
.slice(0b[1
.length -3)
letd =replaceAll('\\\'''c)
【|Vue3的v-htm这个特性把我整吐了】lete =replaceAll('main-recommend''main-recommend-gg'd)
letf =replaceAll(\"\\\\\"\"\"e)
recommend.value =https://mparticle.uc.cn/api/f
至此， v-html转义问题全部解决。