简单的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",//模板idprops: ["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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。