vue获取后台数据并展示在list

中

1. 创建一个Vue实例，定义一个空的list数组用于存放后台返回的数据。

2. 在Vue的mounted钩子函数中，使用axios向后台请求数据，并将返回的数据存入list数组中。

3. 在HTML模板中，使用v-for指令遍历list数组，并使用{{ }}绑定表达式来展示每个元素的数据。

代码示例：

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      list: [], // 定义空数组用于存放后台返回的数据
    }
  },
  mounted() {
    // 使用axios向后台请求数据
    axios.get('/api/data')
      .then(res => {
        this.list = res.data; // 将返回的数据存入list数组中
      })
      .catch(error => {
        console.log(error);
      })
  }
}
</script>

相关问题

ant design vue获取后台数据并展示在list代码

以下是一个简单的例子，用AntDesign Vue获取后台数据并展示在List中：

<template>
  <div>
    <a-button @click="fetchData">获取数据</a-button>
    <a-list
      bordered
      v-if="data.length > 0"
      :dataSource="data"
      :renderItem="(item) => {
        return {
          title: item.title,
          description: item.description,
        };
      }"
    ></a-list>
    <a-spin size="large" v-else-if="loading"></a-spin>
    <p v-else>暂无数据</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: [],
      loading: false,
    };
  },
  methods: {
    fetchData() {
      this.loading = true;
      axios.get('/api/data').then((res) => {
        this.data = res.data;
        this.loading = false;
      }).catch((err) => {
        console.error(err);
        this.loading = false;
      });
    },
  },
};
</script>

上述代码中，我们定义了一个AntDesign Vue的List组件，并通过渲染函数将后台数据展示在List中。同时，我们还定义了一个fetchData方法，通过Axios获取后台数据，并将获取到的数据赋值给data属性。在获取数据的过程中，我们可以使用a-spin组件展示加载状态。

ant design vue通过api获取后台数据并展示在list代码

<template>
<div class="list">
<a-row :gutter="16" v-if="list.length">
<a-col :span="6" v-for="(item, index) in list" :key="index">
<a-card :title="item.title">
<p>{{item.description}}</p>
</a-card>
</a-col>
</a-row>
<a-empty v-else />
</div>
</template>

<script>
import { mapState } from 'vuex'

export default {
computed: {
...mapState(['list'])
},
mounted () {
this.getList()
},
methods: {
getList () {
axios.get('/api/list')
.then(res => {
this.$store.commit('setList', res.data)
})
.catch(err => {
console.log(err)
})
}
}
}
</script>