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>
    
相关文章
相关标签/搜索