嘿嘿,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>

实现效果:

每点击一次按钮将输出一句土味情话

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/653657.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

回归预测 | Matlab实现CPO-LSSVM【24年新算法】冠豪猪优化最小二乘支持向量机多变量回归预测

回归预测 | Matlab实现CPO-LSSVM【24年新算法】冠豪猪优化最小二乘支持向量机多变量回归预测 目录 回归预测 | Matlab实现CPO-LSSVM【24年新算法】冠豪猪优化最小二乘支持向量机多变量回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现CPO-LSSVM【24年…

K个一组翻转链表---链表OJ

https://leetcode.cn/problems/reverse-nodes-in-k-group/?envType=study-plan-v2&envId=top-100-liked K个一组进行翻转,大体上是和前面两两翻转是类似的,区别就在于,这里需要自己判断是否需要翻转,如何翻转,怎么记录。这里我们用递归来实现。 是否需要翻转…

数据结构·单链表经典例题

1. 移除链表元素 OJ链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 本题是说给出一个链表的头节点head和一个整数val&#xff0c;如果发现节点中存的数据有val就删掉它&#xff0c;最后返回修改后的链表头节点地址 如果题目中没有明确…

第十八讲_HarmonyOS应用开发实战(实现电商首页)

HarmonyOS应用开发实战&#xff08;实现电商首页&#xff09; 1. 项目涉及知识点罗列2. 项目目录结构介绍3. 最终的效果图4. 部分源码展示 1. 项目涉及知识点罗列 掌握HUAWEI DevEco Studio开发工具掌握创建HarmonyOS应用工程掌握ArkUI自定义组件掌握Entry、Component、Builde…

【Redis】关于它为什么快?使用场景?以及使用方式?为何引入多线程?

目录 1.既然redis那么快&#xff0c;为什么不用它做主数据库&#xff0c;只用它做缓存&#xff1f; 2.Redis 一般在什么场合下使用&#xff1f; 3.redis为什么这么快&#xff1f; 4.Redis为什么要引入了多线程&#xff1f; 1.既然redis那么快&#xff0c;为什么不用它做主数据…

Nginx 配置解析:从基础到高级应用指南

Nginx 配置解析&#xff1a;从基础到高级应用指南 Nginx 配置解析&#xff1a;从基础到高级应用指南1. 安装和基本配置安装 Nginx基本配置 2. 虚拟主机配置3. 反向代理配置4. 负载均衡配置5. SSL 配置6. 高级配置选项结语 Nginx 配置解析&#xff1a;从基础到高级应用指南 Ngi…

C#使用OpenCvSharp4库读取电脑摄像头数据并实时显示

一、OpenCvSharp4库 OpenCvSharp4库是一个基于.Net封装的OpenCV库&#xff0c;Github源代码地址为&#xff1a;https://github.com/shimat/opencvsharp&#xff0c;里面有关于Windows下安装OpenCvSharp4库的描述&#xff0c;如下图所示&#xff1a; 二、C#使用OpenCvSharp4库…

Python tkinter (8) ——Spinbox控件

Python的标准Tk GUI工具包的接口 tkinter系列文章 python tkinter窗口简单实现 Python tkinter (1) —— Label标签 Python tkinter (2) —— Button标签 Python tkinter (3) —— Entry标签 Python tkinter (4) —— Text控件 Python tkinter (5) 选项按钮与复选框 Pyt…

中间件安全

中间件安全 vulhub漏洞复现&#xff1a;https://vulhub.org/操作教程&#xff1a;https://www.freebuf.com/sectool/226207.html 一、Apache Apache(音译为阿帕奇)是世界使用排名第一的Web服务器软件。它可以运行在几乎所有广泛使用的计算机平台上&#xff0c;由于其跨平台和…

RT-DETR改进有效系列目录 | 包含卷积、主干、RepC3、注意力机制、Neck上百种创新机制

💡 RT-DETR改进有效系列目录 💡 前言 Hello,各位读者们好 Hello,各位读者,距离第一天发RT-DETR的博客已经过去了接近两个月,这段时间里我深入的研究了一下RT-DETR在ultralytics仓库的使用,旨在为大家解决为什么用v8的仓库训练的时候模型不收敛,精度差的离谱的问题,…

智能小程序页面配置、运行机制及路由

页面介绍 Page 代表应用的一个页面&#xff0c;负责页面展示和交互。每个页面对应一个子目录&#xff0c;一般有多少个页面&#xff0c;就有多少个子目录。它也是一个构造函数&#xff0c;用来指定页面的初始数据、生命周期回调、事件处理函数等。 每个小程序页面一般包含以下…

MarkDown快速入门-以Obsidian编辑器为例

直接上图&#xff0c;左右对应。 首先是基础语法。 # 标题&#xff0c;几个就代表几级标题&#xff1b;* 单个是序号&#xff0c;两个在一起就是斜体&#xff1b;- [ ] 代表任务&#xff0c;注意其中的空格&#xff1b; 然后是表格按钮代码 | 使用中竖线代表表格&#xff0c…

Ubuntu22.04安装docker

君衍. 一、认识docker二、查看Docker的依赖三、在Ubuntu22.04上安装Docker步骤1、更新Ubuntu2、添加Docker库3、安装Docker4、Docker测试 四、安装docker-compose 一、认识docker Docker是一个软件容器平台&#xff0c;属于Linux容器的一种封装&#xff0c;同时提供简单易用的…

3. 构建以太网交换网络

3.1 实验一&#xff1a;以太网基础与 VLAN 配置实验 3.1.1 实验介绍 3.1.1.1 关于本实验 以太网是一种基于 CSMA/CD&#xff08;Carrier Sense Multiple Access/Collision Detection&#xff09;的共享通讯介质的数据网络通讯技术。当主机数目较多时会导致冲突严重、广播泛滥…

python222网站实战(SpringBoot+SpringSecurity+MybatisPlus+thymeleaf+layui)-友情链接管理实现

锋哥原创的SpringbootLayui python222网站实战&#xff1a; python222网站实战课程视频教程&#xff08;SpringBootPython爬虫实战&#xff09; ( 火爆连载更新中... )_哔哩哔哩_bilibilipython222网站实战课程视频教程&#xff08;SpringBootPython爬虫实战&#xff09; ( 火…

github连不上

github连不上 错误提示解决方案steam 采用Hosts加速 错误提示 fatal: unable to access ‘https://github.com/Ada-design/qianduan.git/’: Failed to connect to github.com port 443 after 21073 ms: Couldn’t connect to server 解决方案 下载steam https://steampp.ne…

latent-diffusion model环境配置--我转载的

latent-diffusion model环境配置&#xff0c;这可能是你能够找到的最细的博客了_latent diffusion model 训练 autoencoder-CSDN博客 前言 最近在研究diffusion模型&#xff0c;并对目前最火的stable-diffusion模型很感兴趣&#xff0c;又因为stable-diffusion是一种latent-di…

Mysql大数据量分页优化

前言 之前有看过到mysql大数据量分页情况下性能会很差&#xff0c;但是没有探究过它的原因&#xff0c;今天讲一讲mysql大数据量下偏移量很大&#xff0c;性能很差的问题&#xff0c;并附上解决方式。 原因 将原因前我们先做一个试验&#xff0c;我做试验使用的是mysql5.7.2…

Arm AArch64 alignment(对齐)

数据和指令必须与合适的边界保持对齐(alignment)。访问是否对齐会影响ARM核的性能&#xff0c;并且在将代码从早期的体系结构移植到ARMv8-A时可能会出现可移植性问题。出于性能原因&#xff0c;或者在移植代码时&#xff0c;都值得去注意下对齐问题。本文将讲述了ARMv8-A AArch…