簡單的vue-resourse獲取json并應(yīng)用到模板示例
更新時(shí)間：2017年02月10日 15:59:01 作者：一芥華
本篇文章主要介紹了簡單的vue-resourse獲取json并應(yīng)用到模板示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。
不說廢話上代碼：
<!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', {//要應(yīng)用的標(biāo)簽
template: '#task-template',//模板id
props: ['list']//請(qǐng)求的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>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3+vite+TS中使用element-plus按需引入ElLoading、ElMessage樣式失效解決
在項(xiàng)目中使用elementui確實(shí)是很方便的一件事,下面這篇文章主要給大家介紹了關(guān)于vue3+vite+TS中使用element-plus按需引入ElLoading、ElMessage樣式失效解決的相關(guān)資料,需要的朋友可以參考下2023-02-02
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)一個(gè)自定義顏色選擇器,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-04-04
element-ui表單提交自動(dòng)清空隱藏表單值實(shí)現(xiàn)
這篇文章主要為大家介紹了element-ui表單提交自動(dòng)清空隱藏表單值實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
懶加載就是延時(shí)加載,即當(dāng)需要用到的時(shí)候再去加載,本文主要介紹了Vue圖片懶加載之Vue-Lazyload的使用,具有一定的參考價(jià)值,感興趣的可以了解一下2024-05-05
這篇文章主要介紹了淺談Vue 數(shù)據(jù)響應(yīng)式原理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
vue開發(fā)中如何在js文件里使用pinia和組件同步
在JavaScript文件中封裝涉及到使用Pinia的方法時(shí),發(fā)現(xiàn)Pinia和組件內(nèi)容并不同步,二者的狀態(tài)是獨(dú)立的,解決辦法是,在新建對(duì)象的時(shí)候,將Pinia作為參數(shù)傳入,本文給大家介紹vue開發(fā)中如何在js文件里使用pinia和組件同步,感興趣的朋友一起看看吧2024-10-10
Vue3中的setup語法糖、computed函數(shù)、watch函數(shù)詳解
這篇文章主要介紹了Vue3中的setup語法糖、computed函數(shù)、watch函數(shù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
今天小編就為大家分享一篇基于Vue 服務(wù)端Cookies刪除的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Element-ui設(shè)置el-table表頭全選框隱藏或禁用
這篇文章主要給大家介紹了關(guān)于Element-ui設(shè)置el-table表頭全選框隱藏或禁用的相關(guān)資料,文中手把手教你實(shí)現(xiàn)el-table實(shí)現(xiàn)跨表格禁用選項(xiàng),需要的朋友可以參考下2023-07-07
vue中echarts關(guān)系圖動(dòng)態(tài)增刪節(jié)點(diǎn)以及連線方式
這篇文章主要介紹了vue中echarts關(guān)系圖動(dòng)態(tài)增刪節(jié)點(diǎn)以及連線方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07