在 div 中显示来自 JSON 的内容

Posted

技术标签:

【中文标题】在 div 中显示来自 JSON 的内容【英文标题】:Display content from JSON inside a div 【发布时间】:2018-03-05 09:25:53 【问题描述】:

我是 htmljavascript 和 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。 提前感谢您的帮助

【问题讨论】:

Vue display unescaped html的可能重复 【参考方案1】:

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

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

【讨论】:

以上是关于在 div 中显示来自 JSON 的内容的主要内容,如果未能解决你的问题,请参考以下文章

如何在 React 中显示来自 JSON URL 数组的图像

在流星 js 中显示来自 mongodb 的 Summernote 内容时出错

尝试将来自 API 的 JSON 数据显示为数组

Vue JS - 如果来自两个不同 json 数组的两个字符串匹配,则显示数据

JS中将ajax请求返回json数据动态生成表格显示在div中

在tableview中显示来自json文件的图像