简单的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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。