如何解决如何在Vue.js中正确显示JSON数据?
我最近刚接触Vue,并且试图在当前工作的页面中显示JSON数据。
我设法显示了整个JSON,现在我试图正确显示它,而没有括号或对象键,并且每个数据在页面上占据一行。
有人可以帮我吗?
代码如下:
<template>
<div class="CityGuidelines">
<v-card class="guidelines">
<h2>test</h2>
<p>This is a test for the new guidelines page card</p>
{{ info }}
</v-card>
</div>
</template>
<script>
import Info from '@/data/info.json'
export default {
name: 'CityGuidelines',data() {
return {
info: Info.
}
}
}
</script>
部分JSON数据
{
"San Francisco County": {
"info": [
{
"header": "County Guidelines","body": [
{
"h4": "Shelter in Place","content": [
{
"p2": [
{
"p": "Residents should remain at home when possible as it is the safest choice. If you do leave your home,keep the following guidelines in mind."
}
],"bullets": [
{
"bullet": "Maintain 6ft distance between yourself and people who are not in your hosehold unit."
},{
"bullet": "Wear a mask,scarf,bandana or other facial covering."
},{
"bullet": "Limit face to face interactions with those vulnerable to the coronavirus such as those over 60 or those with underlying health conditions."
},{
"bullet": "Wash hands frequently with soap and water for at least 20 seconds,or use hand sanitizer."
},{
"bullet": "Cover coughs and sneezes with a tissue or fabric or,if not possible,use the sleeve of your shirt or elbow. Do not cough or sneeze into your hand."
},{
"bullet": "Use antibactiral wipes to clean any surface that you have to touch."
}
],"link": "https://sf.gov/stay-home-except-essential-needs"
}
]
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。