comTest.json文件中内容,被NewsList.vue文件引入

时间:2023-03-09 19:38:17
comTest.json文件中内容,被NewsList.vue文件引入

本文目标:就是把扩散名为.json文件中数据,传递给NewsList.vue文件。主要通过导出,并传递给data(){}变紧

  1. 新建文件名为:commTest.json
    {
    "schoolName": "宿城区府苑实验小学",
    "scores": [{
    "scoreName": "语文",
    "scoreTime": "周二"
    },
    {
    "scoreName": "数学",
    "scoreTime": "周四"
    },
    {
    "scoreName": "英语",
    "scoreTime": "周五"
    }
    ]
    }
  2. 在 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>