You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
856 B
48 lines
856 B
<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>
|