将字符串转换为vuejs中的Dom [英] convert string to Dom in vuejs

问题描述

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

  //我在模板中写的内容
< div id =log > 
 {{libText}} 
< / div> 
 
 //我在js 
中写的内容Vue.component（...，{
 template：...，
 data：function（）{
 return ... 
} 
}，
计算：{
 libText：function（）{
 var str =< p>一些html< p>; 
 var div = document.createElement（'div'）; 
 div.innerHTML = str; 
 return div; 
} 
}，
 methods：{...} 
}）
  

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

模板：

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

请注意三重{}以获取原始HTML /文本解释。

Javascript：

  Vue.component（...，{
 template：... ，
 data：function（）{
 return ... 
} 
}，
计算：{
 libText：function（）{
 //直接返回html 
 var str =< div>< p>一些html< / p>< / div>; 
 return str; 
} 
}，
方法：{...} 
}）; 
  

recently I want to convert a stirng to Dom in a vue component, but it does't work as my expectation. My code looks like this:

  // 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:{...}
        })

The result I get is a string "[object HTMLDivElement]" rather than a Dom. It would be greatful if anyone can help me solve this problem

解决方案

A possible solution is:

Template:

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

Notice triple {} for get raw html/text interpretation.

Javascript:

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

这篇关于将字符串转换为vuejs中的Dom的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！