vue 后台数据列表获取图片_vue使用ajax获取后台数据进行显示的示例

实例如下所示：

title

#th th{

background-color: #50a9fa;

color: aliceblue;

font-size: large;

}

添加数据

编号	名称	时间	操作
{{item.id}}	{{item.name}}	{{item.ctime}}	删除

//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;

});

}

}

});

以上这篇vue使用ajax获取后台数据进行显示的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持萬仟网。

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！