简单的vue-resourse获取json并应用到模板示例
不说废话上代码：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>vuejs</title>
<style>
.completed{
text-decoration:line-through;
}
.something{
color:red;
}
</style>
</head>
<body>
<divclass="container">
<divid="app">
<task-app:list="tasks">
</task-app>
</div>
<templateid="task-template">
<ul>
<liv-for="taskinlist">
{{task.id}}|{{task.author}}|{{task.name}}|{{task.price}}
</li>
</ul>
</template>
<scriptsrc="vue.js"></script>
<scriptsrc="vue-resource.js"></script>
<script>
Vue.component('task-app',{//要应用的标签
template:'#task-template',//模板id
props:['list']//请求的json
})
</script>
<script>
vardemo=newVue({
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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。