Vue.js 读取json

Vue.js 读取json

这里使用两种方法获取json 并讲数据显示到页面上

1. 使用 ajax 请求到json数据并将其绑定在页面上
2. 使用 vue-resource.js 请求数据

页面显示结果为

结果图

首先是 测试的json 数据

{
"msg": "succ", 
"data": [
    {
        "name": "aaa", 
        "age": 18, 
        "sex": 1
    }, 
    {
        "name": "bbb", 
        "age": 10, 
        "sex": 0
    }
    ]
}

比较简单的接口 使用msg 标示 请求是否成功 数据存于data 中
具体源码在可以从下方链接中看到
这里主要说一下需要注意的部分

1. v-if
   男女

2. v-for
   {{pep.name}}

3. 赋值

        function pushDom(data1){
            var vm = new Vue({
            el: '#app',
            data: {
                peps:data1
            }
        });
   

4. 新的赋值方式
   this.peps = resdata

代码部分
第一种方式获取

    








name
age
sex


    
{{pep.name}}
{{pep.age}}

    男
    女

使用第二种方法

name
age
sex


{{pep.name}}
{{pep.age}}

    男
    女

值得注意的是在vue2.0 中已经废弃了ready 方式而使用了mounted方法

来自** 李龙的博客**的 《Vue.js 读取json》