简单的vue-resourse获取json并应用到模板示例
程序员文章站
2022-07-11 10:43:35
不说废话上代码：
<...
不说废话上代码：
<!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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： jQuery弹出(alert)select选择的值
下一篇： 猜谜语