Dbqb_Study/吴光慧学习笔记/hello_vue3/src/components/Person.vue

<template>
<div class="person">
  <h2>当前求和为：{{sum}}</h2>
<button @click="add">点我sum+1</button>

<br>
  <img v-for="(dog,index) in dogList" :src="dog" :key="index" >
  <button @click="getDog">再来一只狗</button>
</div>
</template>

<script lang="ts" setup name="Person">
import { ref,reactive } from 'vue';
import axios from 'axios';

//数据
let sum = ref(0)
let dogList = reactive([
  'https://images.dog.ceo/breeds/pembroke/n02113023_4269.jpg'
])


//方法
function add(){
  sum.value+=1
}

async function getDog(){
  try{
  let result = await axios.get('https://dog.ceo/api/breeds/image/random')
      dogList.push(result.data.message) 
  }catch(error){
    alert(error)  
  }
}
</script>

<style scoped>
.person{
  width: 200px;
  height: 200px;
  background-color: palegoldenrod;
}
img{
  width: 100%;
  height: auto;
}
</style>