用vue3使用axios从后端获取来的数据怎么布局

在Vue3中使用Axios从后端获取数据后，可以通过v-for指令将数据渲染到页面上。具体布局方式可以根据数据结构和需求来定。

以下是一个简单的示例：

假设我们从后端获取了一个包含商品信息的数组，每个商品对象包含id、name、price等属性，我们可以将数据渲染到一个商品列表中。

HTML模板:

<template>
  <div>
    <h2>商品列表</h2>
    <ul>
      <li v-for="(item, index) in productList" :key="index">
        <div>{{ item.name }}</div>
        <div>{{ item.price }}</div>
      </li>
    </ul>
  </div>
</template>

在Vue3组件中，我们可以在setup函数中使用Axios获取数据，然后将获取到的数据存储在响应式的ref变量中，以便在模板中使用。示例代码如下：

<script>
import axios from 'axios';
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const productList = ref([]);

    onMounted(async () => {
      const res = await axios.get('/api/products');
      productList.value = res.data;
    });

    return {
      productList,
    };
  },
};
</script>

在上面的代码中，我们使用ref()函数创建了一个响应式的变量productList，然后在onMounted钩子函数中使用Axios获取数据并将数据存储在productList中。

最后，在模板中使用v-for指令将数据渲染到页面上。在上面的示例中，我们将每个商品的名称和价格分别渲染到一个div中，可以根据实际需求来渲染更多的数据。