Vue.js学习——获取本地JSON文件数据展示到页面

自己跟着视频学习，就是B站上搜索 vue.js 点击量最多的那个。

自己编写的json文件如下

{
  "status":0,
  "message":[
    {
      "id":1,
      "name":"三菱",
      "ctime":"2017-02-03"
    },
    {
      "id":2,
      "name":"保时捷",
      "ctime":"2017-02-03"
    },
    {
      "id":3,
      "name":"劳斯莱斯",
      "ctime":"2017-02-03"
    },
    {
      "id":4,
      "name":"德克萨斯",
      "ctime":"2017-02-03"
    }
  ]
}

页面代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 模板</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="../bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="../bootstrap/jquery-3.3.1/jquery-3.3.1.min.js"></script>
    <!-- 包括所有已编译的插件 -->
    <script src="../bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-resource.min.js"></script>
</head>
<body>

<div id="app">
    <div class="panel panel-primary">
        <div class="panel-heading ">
            <h2 class="panel-title">添加品牌</h2>
        </div>
        <label class="panel-body form-inline">
            ID：
            <input type="text" v-model="id">

        </label>
        <label>
            Name：
            <input type="text" v-model="name">

        </label>
        <label>
            <input type="button" value="添加品牌" class="form-control" @click="add">

        </label>

    </div>

    <table class="table table-striped table-bordered ">
        <thead>

            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Ctime</th>
                <th>Opreation</th>
            </tr>

        </thead>
        <tbody>

            <tr v-for="item in list" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.ctime }}</td>
                <td>
                    <input type="button" value="删除" class=" btn btn-primary btn-info">
                </td>
            </tr>

        </tbody>

    </table>
</div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{
            id:'',
            name:'',
            list:[
                {
                    id:1,name:'奔驰',ctime:new Date()
            },
                {
                    id:2,name:'宝马',ctime:new Date()
            }]
        },
        created:function () {
            this.getAllList();
        },
        methods:{
            add:function () {

            },
            getAllList:function () {
                //分析：
               /* 1、由于已经导入了resource这个包，所以，可以直接通过 this.$http 来发起数据请求
                2、this.$http.get('url').then(function () {})
                3、当通过then指定回调函数之后，在回调函数中，可以拿到数据服务器返回的result（我这里用的本地）
                4、先判断result.status是否等于0，如果等于0，就成功了，可以把result.message赋值给 this.list;
                    如果不等于0，可以弹框提醒，获取数据失败；*/

                this.$http.get('../json/data.json').then(function (result) {
                    var result = result.body;
                    if(result.status === 0){
                        this.list = result.message;
                    }else{
                        alert('获取数据失败了')
                    }
                })
                
            }

        }
    });
</script>

</body>
</html>

~~

展示效果：

~~

# javascript # css # html
GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支：1 个月前 )
960b763e 3 个月前
8c391e04 6 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区