javascript - 在 div 内显示 JSON 内容

Question

我是 html、javascript 和 vue 的新手。我不确定这是否是 vue 特有的或者可以使用一些 javascript 魔法来解决。

我有基于 NodeJS 的服务，它的 UI 是用 VueJS 编写的。页面的内容来自 markdown 编辑器，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。感谢您提前提供帮助

Answer 1

使用 v-html 属性呈现原始 html。阅读更多内容docs here .

需要注意的是，像这样插入原始 html 可能是一个安全漏洞(请参阅文档中的注释)。