使用js解析不了模板语法,与ant ui 标签


var zddie = document.getElementById('A0101').parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.previousSibling 
                    var pop ='<a-popover trigger="click">'+ 
                    '<template slot="content">'+
                    '<p style="color: #000;font-size: 13px;width: 300px">'
                    +222+
                    '</p>'+
                    '</template>'+
                    '<a-icon  type="question-circle" style="color:#DFDFDF;margin:0;margin-left: 10px;font-size:13px"/>'+
                    '</a-popover>'
                    zddie.insertAdjacentHTML('beforeend', pop)

img

img

换成 ``呢

可能是 字符串 拼接的问题 你使用 es6模板字符串试试 。

总的来说这个和渲染时机有问题 你用js插入的数据并没有被 vue 所渲染
正常来说一个组件如果被渲染的话他会被解析成 对应的 html 识别的标签,就像 a-popover 这其实是你自定义的组件,html并不识别这个组件,你不能直接去使用 insertAdjacentHTML 向后直接插入这个组件
你现在要做的是要将 vue 组件解析成 组件内部定义的最终html识别的组件,在插入进去

img

img

可以尝试这样使用一下

    <span id="a-span">
      123123
    </span>

    // 创建构造器
    var Profile = Vue.extend({
      template: '<p>{{firstName}} <el-button>小仙男在努力<el-button> {{lastName}} aka {{alias}}</p>',
      data: function() {
        return {
          firstName: 'Walter',
          lastName: 'White',
          alias: 'Heisenberg'
        }
      }
    })
    new Profile().$mount('#a-span')