vue-resourse怎么获取json并应用到模板
这篇文章给大家分享的是有关vue-resourse怎么获取json并应用到模板的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue js</title>
<style>
.completed {
text-decoration: line-through;
}
.something {
color: red;
}
</style>
</head>
<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.id }} | {{ task.author }} | {{ task.name }} | {{ task.price }}
</li>
</ul>
</template>
<script src="vue.js"></script>
<script src="vue-resource.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>
感谢各位的阅读！关于“vue-resourse怎么获取json并应用到模板”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！