簡單的vue-resourse獲取json并應用到模板示例
更新時間：2017年02月10日 15:59:01 作者：一芥華
本篇文章主要介紹了簡單的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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了mpvue+vuex搭建小程序詳細教程(完整步驟)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了vue之數(shù)據(jù)交互實例代碼，vue中也存在像ajax和jsonp的數(shù)據(jù)交互，實現(xiàn)向服務器獲取數(shù)據(jù)，有興趣的可以了解一下2017-06-06
這篇文章主要介紹了vue中input的v-model清空操作，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)列表無縫滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要給大家介紹了關于vue.js中Vue-router 2.0基礎實踐的相關資料，其中包括vue-router 2.0的基礎用法、動態(tài)路由匹配、嵌套路由、編程式路由、命名路由以及命名視圖等相關知識，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
詳解win7 cmd執(zhí)行vue不是內部命令的解決方法
這篇文章主要介紹了詳解win7 cmd執(zhí)行vue不是內部命令的解決方法的相關資料,這里提供了解決問題的詳細步驟，具有一定的參考價值，需要的朋友可以參考下2017-07-07
Vue2.0 v-for filter列表過濾功能的實現(xiàn)
今天小編就為大家分享一篇Vue2.0 v-for filter列表過濾功能的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue中的mescroll搜索運用及各種填坑處理，文中通過代碼給大家講解了mescroll vue使用，感興趣的朋友跟隨小編一起看看吧2019-10-10
本文通過實例代碼給大家介紹了在vue中使用echarts圖表的方法，需要注意的事項文中給大家提到,需要的朋友可以參考下2018-10-10
vue-cli之引入Bootstrap問題(遇到的坑,以及解決辦法)
這篇文章主要介紹了vue-cli之引入Bootstrap問題(遇到的坑,以及解決辦法),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10