vue-resourse将json数据输出实例

前端之家收集整理的这篇文章主要介绍了vue-resourse将json数据输出实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文主要讲v-resourse 获取json数据并传递到DOM中,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

1.demo目录,不要管index.html和index.js

2.html页面 vue-resourse-josn1.1.html展示json中的数据

<Meta charset="UTF-8"> vue-resourse-json
  • 编号:{{item.id}}

    作者:{{item.author}}

    书名{{item.name}}

    价格:{{item.price}}

    出版时间{{item.time}}

  • <script type="text/javascript" src="static/js/vue-resourse-json.js">

    3.js vue-resourse-json.js

    页面 itemList:[],},//向data数组里添加数据 mounted:function(){ this.getData(); },methods: { getData:function () { var self = this; this.$http.get("static/data/list_json.json").then(function (res) {

    console.log(res);

    //var lens = res.body.lists.length;
    //console.log(lens);
    //获取了当前数组的长度,为3
    for(var i= 0,len=res.body.lists.length;i<len;i++){
    //已经获取json数组中的数据,接下来如何传递到前端页面
    //获取全部数据
    var selData = res.body.lists[i];
    //console.log(selData);

    //获取数组中的部分数据
    var part = res.body.lists[i].name;
    //console.log(part);
    //将获取的数据push到空的数组中itenList,
    self.itemList.push(selData);

    }
    })
    }
    }
    });

    4.json为list_josn.json

    下面是json中的数据

    5.结果输出

    6.总结:主要理清数据请求和传递的流程就行了。

    本文已被整理到了《》,欢迎大家学习阅读。

    关于vue.js组件的教程,请大家点击专题进行学习。

    更多vue学习教程请阅读专题

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    猜你在找的Vue相关文章