在div中显示JSON的内容

时间:2017-09-24 07:39:42

标签: javascript html node.js vue.js

我是html,javascript和vue的新手。我不确定这是特定的vue还是可以使用一些javascript魔法来解决。

我有基于NodeJS的服务,其中包含用VueJS编写的UI。该页面的内容来自降价编辑器,nodejs使用showdown将其转换为html。 Nodejs的响应是json,我试图使用Vue在屏幕上显示它,如下所示

 app.js (vue)

 new Vue({
   el: "#mdEditor",

   data: {
      content: '',
    },
   mounted: function() {
     this.defaultPage();
   },

  methods: {
    defaultPage: function() {
      this.$http.get('/defaultPage')
       .then((result) => {
          this.$set(this, 'content', result.data.html);
          console.log('result=', result);
         }, (err) => {
           console.log('error=', err);
       });
   }
 }
});

HTML文件

  <div class="container" id="mdEditor">
<div class="col-sm-12">
  <div class="panel panel-primary">
    <div class="panel-body">
      {{content}}
    <!-- content of the md file goes here-->
    </div>
  </div>
</div>

然而,内容(即html代码)打印为文本而不是html。 提前感谢您的帮助

1 个答案:

答案 0 :(得分:2)

使用v-html属性渲染原始html。请阅读docs here

中的更多内容

值得注意的是,插入这样的原始html可能是一个安全漏洞(请参阅文档中的说明)。