Question

最近我想在vue组件中将stirng转换为Dom，但它并不像我期望的那样工作。我的代码如下所示：

  // what I wrote in the template
  <div id="log">
      {{libText}}
  </div>

  // what I wrote in js
        Vue.component(...  , {
        template: ...  ,
        data: function () {
               return ...     
            }
        },
        computed: {           
            libText:function(){
                var str="<p>some html</p>";
                var div = document.createElement('div');
                div.innerHTML = str;
                return div;
            }
        },
        methods:{...}
        })

我得到的结果是字符串“[object HTMLDivElement]”而不是Dom。如果有人能帮助我解决这个问题，那将是非常好的

Answer 1

如果您使用的是Vue 2，请使用v-html指令：

<div v-html="yourVariable"></div>

https://vuejs.org/v2/api/#v-html

Answer 2

可能的解决方案是：

模板：

<div id="log">
    {{{libText}}}
</div>

注意获得原始html /文本解释的triple {}。

使用Javascript：

Vue.component(...  , {
    template: ...  ,
    data: function () {
           return ...     
        }
    },
    computed: {           
        libText:function(){
            // return directly html
            var str="<div><p>some html</p></div>";
            return str;
        }
    },
    methods:{...}
});

Answer 3

你想要做的事情没有任何意义。这不是胡须的工作方式。他们只输出字符串。难怪你的输出是一个字符串。

如果要创建新组件，则需要构造函数 AND DOM元素，具体如下。

DOM el + VueComponent constructor = Vue Component

您应该在一些钩子（Vue.extend）中构造构造函数，例如创建的钩子。然后像你一样创建元素。然后做一些事情：

var myComponent = new myConstructor({el: myElement})

瞧瞧＆＃39;你已经完成了！

在vuejs中将字符串转换为Dom

3 个答案: