有点好玩，记录一下。通过按钮调用网站接口，然后解构数据输出土味情话。
lovetalk.vue:
<!--vue简单框架-->
<template>
<!-- 这是一个div容器，用于显示土味情话 -->
<div class="talk">
<!-- 当点击按钮时，触发getloveTalk方法 -->
<button @click="getloveTalk">获取一句土味情话 </button>
<!-- 显示情话列表 -->
<ul>
<!-- 使用v-for指令循环遍历talklist数组，并显示每个链接的标题 -->
<li v-for="link in talklist" :key="link.id">{{ link.title }}</li>
</ul>
</div>
</template>
<script lang='ts'setup name="lovetalk">
import { reactive } from 'vue'; // 导入Vue 3的reactive函数，用于创建响应式数据
import axios from "axios"; // 导入axios库，用于发送HTTP请求
import{nanoid} from 'nanoid' // 导入nanoid库，用于生成一个唯一的ID
// 定义一个响应式的数据数组，包含了一些土味情话的数据
let talklist=reactive([
{id:'01',title:'你今天有点怪,怪好看'},
{id:'02',title:'草莓,蓝莓，今天想我没'},
{id:'03',title:'心理给你留了一块地，我的死心塌地'},
{id:'04',title:'你好,可以问条路么，通往你心里的路怎么走'}
])
// 定义一个方法，用于获取一句新的土味情话并添加到列表中
async function getloveTalk(){
// 向指定的URL发送GET请求，并使用连续解构赋值和重命名获取返回的内容中的标题字段
let {data:{content:title}}=await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
// 创建一个新的对象，包含一个唯一的ID和一个标题，并把这个对象包装成一个字符串格式的文本数据
let obj={id:nanoid(),title}
// 把新创建的对象添加到talklist数组的开头位置
talklist.unshift(obj)
}
</script>
<style scoped>
.talk{ /* 定义.talk类的样式 */
background-color: orange; /* 设置背景色为橙色 */
padding: 10px; /* 设置内边距为10px */
border-radius: 10px; /* 设置边框圆角为10px */
box-shadow: 0 0 10px; /* 设置盒子阴影 */
}
button{ /* 定义button类的样式 */
margin: 5px; /* 设置外边距为5px */
height: 30px; /* 设置高度为30px */
}
</style>根组件App.vue
<!--vue简单框架-->
<template>
<!-- <Count/>
<br> -->
<!-- 使用lovetalk组件 -->
<lovetalk/>
</template>
<script lang='ts' name="app" setup>
/* import Count from './component/count.vue' */
import lovetalk from './component/lovetalk.vue';//引用lovetalk组件
</script>
<style scoped>
</style>实现效果：
每点击一次按钮将输出一句土味情话
