简单的vue-resourse获取json并应用到模板示例
2017-02-17 15:14:23
JavaScript
本篇文章主要介绍了简单的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>
|
上面就是这篇文章的全部内容，希望对大家的学习和工作有所帮助
原文链接：http://www.cnblogs.com/ikuyka/p/5766867.html
