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

Vue.js学习——获取本地JSON文件数据展示到页面自己跟着视频学习，就是B站上搜索 vue.js 点击量最多的那个。自己编写的json文件如下{"status":0,"message":[{"id":1,"name":"三菱","ctime":"2017-02-03"},{"id":2,"name":"保时捷","ctime":"2017-02-03"},

liu5282828

5891人浏览 · 2020-10-19 20:32:11

liu5282828 · 2020-10-19 20:32:11 发布

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>

展示效果：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^