简单的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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
vue如何实现列表自动滚动、向上滚动的效果(vue-seamless-scroll)
这篇文章主要介绍了vue如何实现列表自动滚动、向上滚动的效果(vue-seamless-scroll)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
这篇文章主要介绍了vue-cli下的vuex的简单Demo（实现加1减1操作）,本文图文并茂给大家介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下2018-02-02
在本文中，将向你展示5个特性，你可以通过 Vuex 插件轻松地添加到下一个项目中。一起来学习下。2017-11-11
vue-element-admin关闭eslint的校验方式
这篇文章主要介绍了vue-element-admin关闭eslint的校验方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家详细解析了Vue监听数组变化的源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
完美解决vue中报错 “TypeError: Cannot read properties of null
这篇文章主要介绍了完美解决vue中报错 “TypeError: Cannot read properties of null (reading ‘forEach‘)“,本文给大家分享详细解决方案，需要的朋友可以参考下2023-02-02
这篇文章主要介绍了ant-design-vue按需加载的坑的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了vue配置请求本地json数据的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用,下面这篇文章主要给大家介绍了关于Vue中mixins的使用方法以及实际项目应用指南,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
在Vue开发中遇到了搜索框输入防抖处理,算是防抖的使用场景之一吧,这篇文章主要给大家介绍了关于Vue3指令之搜索框输入防抖功能实现的相关资料,需要的朋友可以参考下2022-12-12
最新评论