cn 域名网站,北京到安阳多少公里路,西安专业网站建设价格,网站建设中网站制作包括哪些内容有点好玩#xff0c;记录一下。通过按钮调用网站接口#xff0c;然后解构数据输出土味情话。 lovetalk.vue:
!--vue简单框架--
template !-- 这是一个div容器#xff0c;用于显示土味情话 -- div classtalk !-- 当点… 有点好玩记录一下。通过按钮调用网站接口然后解构数据输出土味情话。 lovetalk.vue:
!--vue简单框架--
template !-- 这是一个div容器用于显示土味情话 -- div classtalk !-- 当点击按钮时触发getloveTalk方法 -- button clickgetloveTalk获取一句土味情话 /button !-- 显示情话列表 -- ul !-- 使用v-for指令循环遍历talklist数组并显示每个链接的标题 -- li v-forlink in talklist :keylink.id{{ link.title }}/li /ul /div
/template script langtssetup namelovetalk import { reactive } from vue; // 导入Vue 3的reactive函数用于创建响应式数据 import axios from axios; // 导入axios库用于发送HTTP请求 import{nanoid} from nanoid // 导入nanoid库用于生成一个唯一的ID // 定义一个响应式的数据数组包含了一些土味情话的数据 let talklistreactive([ {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?formatjson) // 创建一个新的对象包含一个唯一的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/
/templatescript langts nameapp setup /* import Count from ./component/count.vue */
import lovetalk from ./component/lovetalk.vue;//引用lovetalk组件
/scriptstyle scoped
/style
实现效果 每点击一次按钮将输出一句土味情话
