Vue使用ajax(axios)请求后台数据,并且自定义显示到前端页面
时间: 2024-03-09 07:50:25 浏览: 22
好的,首先你需要在Vue项目中安装axios。可以使用以下命令进行安装:
```
npm install axios
```
然后在你的Vue组件中引入axios:
```js
import axios from 'axios'
```
接下来你可以在`data`中定义需要展示的数据:
```js
export default {
data() {
return {
dataList: []
}
}
}
```
然后在`mounted`生命周期函数中使用axios请求后端数据,并将返回的数据存储在`dataList`中:
```js
export default {
mounted() {
axios.get('/api/data').then(res => {
this.dataList = res.data;
}).catch(err => {
console.log(err);
});
}
}
```
最后在模板中使用`v-for`指令遍历`dataList`,并将数据展示到页面上:
```html
<template>
<div>
<ul>
<li v-for="(data, index) in dataList" :key="index">
<span>{{ data.name }}</span>
<span>{{ data.age }}</span>
<span>{{ data.address }}</span>
</li>
</ul>
</div>
</template>
```
这样就可以在前端页面展示从后端请求的数据了。