vue3使用axios获取远程数据并输出dom（写入数组）

代码：

<template>
  <div  class="nihao">
    <button @click="getDog">获取狗的图片</button>
    <br>
    <img v-for="(d,index) in i" :key="index" :src="d" />
  </div>
</template>

<script setup>
  import axios from 'axios'
  import { reactive } from 'vue';
  
  let i = reactive([])
  function getDog(){
  // 然后就可以使用axios发起HTTP请求了，比如：
  axios.get('https://dog.ceo/api/breed/pembroke/images/random')
    .then(response => {
      console.log(response.data)
      i.push(response.data.message)
      console.log(i)
    })
    .catch(error => {
      console.error(error);
    });
}
</script>

<style scoped>
.nihao{
    background-color: bisque;
    height: auto;
}
.nihao img{
  height: 200px;
  margin-right: 10px;
}
</style>

注意：

1. 数组为复合类型，使用reactive绑定最佳
2. 数组添加数据的语法为:arr.push(元素)