v-html 及vue-append插件

前言

先说一下，使用v-html要达到什么效果。

故事是这样的： 我们系统需要一个“代码组件”,即用户可以插入html/css/js代码来修改他的网站。所以，我就想到了用v-html指令来渲染用户提交的代码。 PS : innerHTML是不会执行script代码的。

v-html:

更新元素的 innerHTML v-html也不会执行script代码。

解决方案

百度and google一番，给出的方案大致如下： 1.在渲染完成后，过滤掉script代码，动态插入script标签 2.过滤下script代码，使用elval执行 3.自己写一个可以执行script的指令

最终：我使用了一个现成的插件vue-append。

vue-append: like v-html directive, but it can call javascript function

使用插件的时候，有一点小问题就是，该插件不支持script外链的形式。 看了它的github的issues，发现里面就有其解决方案。 方案链接如下： github.com/hacke2/vue-…

总结

看了一下vue-append的源码，其实现的原理分析如下： 匹配script代码，将里面的代码使用eval执行。

转载于:https://juejin.im/post/5c1f8729e51d4568f03b8972