本文目标:就是把扩散名为.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>

comTest.json文件中内容,被NewsList.vue文件引入的更多相关文章

  1. 通过java 来实现对多个文件的内容合并到一个文件中

    现在有多个txt文本文件,需要把这么多个文件的内容都放到一个文件中去 以下是实现代码 package com.SBgong.test; import java.io.*; public class F ...

  2. 读取xlsx文件的内容输入到xls文件中

    package com.cn.peitest.excel; import java.io.File; import java.io.FileInputStream; import java.io.Fi ...

  3. 文件下载Controller,文件夹内容监听,文件上传,运行程序通过url实现文件下载

    文件下载Controller @RequestMapping("/fileDownLoad") public ResponseEntity<byte[]> fileDo ...

  4. JavaScript进阶(二)在一个JS文件中引用另一个JS文件

    在一个JS文件中引用另一个JS文件       转载地址:http://blog.csdn.net/zndxlxm/article/details/7875787 方法一 在调用文件的顶部加入下例代码 ...

  5. 在一个另一个文件中 #include一个**dlg.h文件,会发生dlg的资源ID未定义的错误 :

    1    在一个另一个文件中 #include一个**dlg.h文件,会发生dlg的资源ID未定义的错误 : dlg1.h(23) : error C2065: 'IDD_DIALOG1' : und ...

  6. vue.js使用webpack发布,部署到服务器上之后在浏览器中可以查看到vue文件源码

    webpack+vue 2.0打包发布之后,将发布的文件部署到服务器中之后,浏览器中访问的时候会出现一个webpack文件夹,里边会显示vue文件源码 如果不想让vue源文件显示出来,可以在confi ...

  7. 如何在一个文件中写多个Vue组件(译-有删改)

    原文地址 Writing multiple Vue components in a single file 在一个文件中编写多个组件是React的模式,其中一些文件包含多个组件. 走开发过程中,有些组 ...

  8. 快速搜索多个word、excel等文件中内容

    背景:要在多个文件甚至文件夹中找到文件中包含的某些内容 以win10举例: 1.打开一个文件夹 2.打开文件夹选项 3.配置搜索 4.搜索文件

  9. linux下复制一个文件的内容到另一个文件

    cat path/to/file/filename1 >> path/to/file/filename2 例如: cat id_rsa.pub >> ~/.ssh/author ...

随机推荐

  1. JVM性能优化系列-(3) 虚拟机执行子系统

    3. 虚拟机执行子系统 3.1 Java跨平台的基础 Java刚诞生的宣传口号:一次编写,到处运行(Write Once, Run Anywhere),其中字节码是构成平台无关的基石,也是语言无关性的 ...

  2. 暑假第五周总结(学习HBASE相关知识)

    本周主要对HBASE的相关知识进行了学习,主要是通过视频的讲解了解到了HBASE的存储机制,HBASE的机制与普通的关系型数据库完全不同,HBASE以列进行存储,其主要执行的就是增删查操作,其更改主要 ...

  3. SpringBoot学习(3) - jdbc

    数据库使用MySQL 5.7.18版本. 装配DataSource的步骤:1.加入数据库驱动 pom.xml: <project xmlns="http://maven.apache. ...

  4. ORA-12547: TNS: 丢失连接

    今天服务器挂掉了,公司的人弄了一下,,把服务器修好了,,但是我本地链接数据库一直报这个ORA-12547: TNS: 丢失连接,是服务器上的TNS监听没有启动,需要重启一下,

  5. HTML5与HTML4的区别-----新增的常用标签

    做前端工程师这么长时间了, 对HTML5的一些标签的用法还不是很熟悉.这篇随笔算是对学过的知识的梳理.常言道,温故而知新  ~哈哈.里面有不正确的地方还望各位大牛们指正,评论. 在做网页时习惯把网页分 ...

  6. sed命令入门

    什么是sed sed是一种流处理编辑器,可以分割.查找.替换文本. sed命令的处理流程:行处理 Created with Raphaël 2.1.0在shell中执行sed文本或管道输入读入到模式空 ...

  7. Python 协程 - Coroutines

    协程 - Coroutines Awaitable Objects, Awaitable Objects 通常由 __await__() 生成, 而 Coroutine objects 是由 asyn ...

  8. 苹果系统iOS、macOS应用管理机制

    iOS.macOS系统应用管理机制 苹果系统包括:iOS.macOS.watchOS.tvOS.应用软件的生命周期为:开发.上线.安装.使用.卸载.这篇文档将从应用生命周期的各个环节介绍苹果系统对应用 ...

  9. 详解Java8的日期和时间API

    详解Java8的日期和时间API 在JDK1.0的时候,Java引入了java.util.Date来处理日期和时间:在JDK1.1的时候又引入了功能更强大的java.util.Calendar,但是C ...

  10. javascript 动态加载javascript文件

    /* loadFile(data, callback): 动态加载js文件 data: 存放需要加载的js文件的url("url" || ["url", &qu ...