前言
先说一下,使用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执行。