vue3在接口返回几张图片并点击按钮重新向接口返回新的图片

对于Vue3来说，你可以在组件中使用一个数组来存储你的图片信息，然后通过v-for指令将它们渲染到页面上。然后，你可以在按钮的点击事件中调用一个方法，该方法将向接口发送请求以获取新的图片信息，并将其添加到数组中，从而更新页面。

以下是一个简单的示例代码：

<template>
  <div>
    <img v-for="img in images" :src="img.url" />
    <button @click="loadNewImages">Load New Images</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      images: []
    };
  },
  mounted() {
    // 初始化页面
    this.loadNewImages();
  },
  methods: {
    async loadNewImages() {
      // 向接口发送请求以获取新的图片信息
      const response = await axios.get('/api/images');

      // 将新的图片信息添加到数组中
      this.images = response.data;
    }
  }
};
</script>

在这个示例中，我们在组件的data选项中定义了一个空数组images，然后使用v-for指令将其渲染到页面上。当按钮被点击时，loadNewImages方法将被调用，该方法使用axios库发送一个GET请求以获取新的图片信息，并将其添加到数组中以更新页面。在组件的mounted钩子中，我们调用loadNewImages方法以初始化页面。