本文主要是介绍嘿嘿，vue之输出土味情话，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
有点好玩，记录一下。通过按钮调用网站接口，然后解构数据输出土味情话。
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>实现效果：
每点击一次按钮将输出一句土味情话
这篇关于嘿嘿，vue之输出土味情话的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
