vuejs 获取.json文件并应用到模板 demo

看了官网的 API 还是没怎么明白， 实例也没有， 在别的 圆主中看到，本地测试时可用，并附加 json文件 。

原链接：http://www.cnblogs.com/ikuyka/p/5766867.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>vuejs获取json文件并应用到模板demo</title>
<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="pragram" content="no-cache">
</head>
<style>
.completed {
    text-decoration: line-through;
}
.something {
    color: red;
}
</style>
<body>
　　
<div class="container">
　　
<div id="app">
  <task-app :list="tasks"> </task-app>
</div>
<template id="task-template">
  <ul>
    <li v-for="task in list"> {{ task.时间 }} | {{ task.author }} | {{ task.name }} | {{ task.price }} </li>
  </ul>
</template>
<script type="text/javascript" src="vue.min.js"></script> 
<script src="https://cdn.jsdelivr.net/vue.resource/1.0.0/vue-resource.min.js"></script> 
<script>
    Vue.component('task-app', {//要应用的标签
        template: '#task-template',//模板id
        props: ['list']//请求的json
    })
</script> 
<script>
    var demo = new Vue({
        el: '#app',
        data: {
            tasks: '' //为空，可以是null
        },
        ready: function() {
            this.getCustomers()
        },
        methods: {
            getCustomers: function() {
                this.$http.get('resourse.json')
                    .then(function(response) { //response传参，可以是任何值
                        this.$set('tasks', response.data)
                    })
                    .catch(function(response) {
                        console.log(response)
                    })
            }
        }
    })
</script>
</body>
</html>

 

resourse.json ：

[
{"时间":1,"author":"曹雪芹","name":"红楼梦","price":32},
{"时间":2,"author":"施耐庵","name":"水浒传","price":30},
{"时间":"3","author":"罗贯中","name":"三国演义","price":24},
{"时间":4,"author":"吴承恩","name":"西游记","price":20}
]

posted @ 2016-09-20 15:59  Gaochunling  阅读(1396)  评论(0)    收藏  举报