本文目标:就是把扩散名为.json文件中数据,传递给NewsList.vue文件。主要通过导出,并传递给data(){}变紧
- 新建文件名为:commTest.json
{
"schoolName": "宿城区府苑实验小学",
"scores": [{
"scoreName": "语文",
"scoreTime": "周二"
},
{
"scoreName": "数学",
"scoreTime": "周四"
},
{
"scoreName": "英语",
"scoreTime": "周五"
}
]
} - 在 NewsList.vue文件中引入代码如下
<template>
<div class="NewsList">
NewsList
<h1>{{msg}}</h1>
<h2>{{schoolName}}</h2>
<ul>
<li v-for="score in scores"
:key="score.scoreName">
{{score.scoreName}}-->{{score.scoreTime}}
</li>
</ul>
</div>
</template>
<script>
// json
import commTest from '../../assets/commTest.json'
export default {
data () {
return {
msg: 'NewsList.vue 组件',
schoolName: '宿城区府苑实验小学',
//commTest.json文件中scores传给数据变量scores
scores: commTest.scores
}
}
}
</script>