v-html渲染组件问题

由于前面对html进行过解析,今天想用vue拖拽，实现一手类似快站那种自动生成代码，结果就遇到了拖拽组件过去怎么无法解析的问题，因为vue的v-html为了防止xss攻击只能解析html

思路

 先实现简单页面 分三块左中右，左边是需要拖动的组件，中间是用于组件排列显示，右边是解析出的代码

左边组件列表代码

  

     
      备选项
    
  

中间组件显示代码

接下来实现组件的拖拽使用drag和drop 将组件显示在Variablebox页面上,使用v-html无效后,百度了一下,发现基本上叫使用vue.Vue.compile( template ) 和render但是没给例子

compile是将一个模板字符串编译成 render 函数,就是最后
都是render调用createElement,转化成html,但是我们我们是直接渲染

所以个人
感觉行不通,最后只能尝试新建组件然后挂载上去

   new Vue({
        // el: ‘#app'
        template: this.ele,
         data:{
           radio: '2'
        },
      }).$mount("#apps");

这样算是暂时决解掉这个问题吧

vue中运用v-html渲染标签

获取后台数据带 标签 内容，需要渲染到页面展示。最终效果如下：图文排版

1.首先拿到数据，单独处理

2.接着在html中输出即可