在 vuejs 中将字符串转换为 Dom

Posted 2023-02-22

【中文标题】在 vuejs 中将字符串转换为 Dom

【英文标题】：convert string to Dom in vuejs

【发布时间】：2016-11-20 13:25:30

【问题描述】：

最近我想在一个 vue 组件中将一个搅拌转换为 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。 如果有人能帮我解决这个问题，那就太好了

【参考方案1】：

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

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

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

【讨论】：

即使您想将其保留为字符串，它也能完美运行。谢谢！

【参考方案2】：

一个可能的解决方案是：

模板：

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

注意三元组 用于获取原始 html/文本解释。

javascript：

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