vue使用ajax获取后台数据进行显示的示例
更新时间：2018年08月09日 11:27:33 作者：猴哥哥5
今天小编就为大家分享一篇vue使用ajax获取后台数据进行显示的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
实例如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/vue.min.js"></script>
<script src="/vue-resource.min.js"></script>
<style>
#th th{
background-color: #50a9fa;
color: aliceblue;
font-size: large;
}
</style>
</head>
<body >
<div id="app" align="center">
<input type="text" v-model="id">
<input type="text" v-model="pname">
<button @click="addData">添加数据</button>
<table id="th" border="1"solid width="400px">
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
<tr v-for="item in list ">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="javascript:void(0)" rel="external nofollow" >删除</a>
</td>
</tr>
</table>
</div>
<script>
//vue的生命周期
new Vue({
el:'#app',
data:{
list:[]
},
//vue对象实例创建成功之后就会自动调用这个方法
//如果你想写的方法在舒适化的时候就被调用的话就要要用到created这个
created:function () {
this.getlist();//这里定义这个方法，vue实例之后运行到这里就调用这个函数
},
methods:{
getlist:function () {
//请求服务器的api获取到品牌的数据列表
this.$http.get('http://vueapi.ittun.com/api/getprodlist').then(function (response) {
//处理服务器异常信息提示
if(response.body.status!=0)
{
alert(response.body.message);
return ;
}
//处理正常的逻辑数据处理
this.list=response.body.message;
});
}
}
});
</script>
</body>
</html>
以上这篇vue使用ajax获取后台数据进行显示的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
众所周知组合式API是一系列API的集合,使我们可以使用函数而不是声明选项的方式书写Vue组件,这篇文章主要给大家介绍了关于Vue组合式API的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了Vue3-pinia状态管理,pinia是 vue3 新的状态管理工具，简单来说相当于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue filter 完美时间日期格式的方法，文中给大家提到了vue filter方法-时间格式化 的代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2019-08-08
这篇文章主要介绍了vue-router中关于meta的作用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要为大家介绍了el autocomplete支持分页上拉加载使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
在Vue.js中， Vuex是一个强大的状态管理工具，而localStorage则是一种用于存储和获取本地数据的机制，虽然这两个东西都可以用来存储数据，但它们之间还是有很大的区别，本文就来简单说说吧2023-05-05
这篇文章主要介绍了vue router-link 默认a标签去除下划线的实现操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
最近开发有个需求需要酷炫的文字滚动效果，发现vue2版本的CountTo组件不适用与Vue3,没有轮子咋办，那咱造一个呗，感兴趣的小伙伴可以跟随小编一起了解一下2022-11-11
本文主要介绍了element tooltip的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要为大家介绍了Vue3从0搭建Vite打包组件库使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
最新评论