在 div 中显示来自 JSON 的内容
Posted
技术标签:
【中文标题】在 div 中显示来自 JSON 的内容【英文标题】:Display content from JSON inside a div 【发布时间】:2018-03-05 09:25:53 【问题描述】:我是 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。 提前感谢您的帮助
【问题讨论】:
Vue display unescaped html的可能重复 【参考方案1】:使用v-html
属性呈现原始html。在docs here 中阅读更多内容。
请务必注意,像这样插入原始 html 可能是一个安全漏洞(请参阅文档中的说明)。
【讨论】:
以上是关于在 div 中显示来自 JSON 的内容的主要内容,如果未能解决你的问题,请参考以下文章
如何在 React 中显示来自 JSON URL 数组的图像
在流星 js 中显示来自 mongodb 的 Summernote 内容时出错
Vue JS - 如果来自两个不同 json 数组的两个字符串匹配,则显示数据