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

大模型基础

大模型是什么 大模型是一种由大规模语言模型&#xff0c;由大量神经元组成&#xff0c;可以对输入的文本或者其他的类似视频图片语音等进行预测和生成&#xff0c;以便提供更多的信息给用户。这种模型通常基于深度学习技术和大规模语言模型训练&#xff0c;能够模拟人类的对话…

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库…

java 中 this关键字

class Person {private double base;// 普通方法(非构造器方法)里的this&#xff0c;就是new出来的那个对象public double getBase(){ return this.base;}public void setBase(double b){this.base b }// 构造器中的this&#xff0c;是&#xff0c;当前正在new过程中的对象&am…

人机协同中的一阶谓词推理与态势信息增强

一阶谓词逻辑推理是指使用一阶谓词逻辑来进行推理和推断。在人机协同中&#xff0c;一阶谓词逻辑推理可以用于理解和解释人类用户的意图和需求&#xff0c;以及帮助机器理解和生成自然语言。 一阶谓词逻辑推理的基本原理是使用一组逻辑规则和事实&#xff0c;通过逻辑推理来得出…

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;用来指定页面的初始数据、生命周期回调、事件处理函数等。 每个小程序页面一般包含以下…

设计一个分布式ID

为了保证全局唯一性可以用时间作为区分点一部分&#xff0c;时间尽可能细化&#xff0c;可以精确到毫秒&#xff0c;甚至是微秒和纳秒。如果是分布式系统有多态机器&#xff0c;可以根据机器ID再进行以下区分。如哦机器运行的特别快&#xff0c;1毫秒有大量ID生成&#xff0c;可…

第十四章认识Ajax(五)

art-template模板引擎 简介 art-template模板引擎是新一代高性能JavaScript模板引擎,可以将数据与HTML模板结合,省去繁琐的字符串拼接,便于代码维护。 此模板主要使用特定的语法将动态数据嵌入到HTML模板中,然后生成最终的HTML页面。 art-template模板引擎既可以在服务…

代码随想录算法训练营第2天—数组02 | *977.有序数组的平方 ,209.长度最小的子数组 ,*59.螺旋矩阵II

*977.有序数组的平方 题目链接&#xff1a;https://leetcode.cn/problems/squares-of-a-sorted-array/ 文章讲解&#xff1a;https://programmercarl.com/0977.%E6%9C%89%E5%BA%8F%E6%95%B0%E7%BB%84%E7%9A%84%E5%B9%B3%E6%96%B9.html 视频讲解&#xff1a; https://www.bilib…

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

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

Mybatis 52_基于嵌套select的N-N关联

52_基于嵌套select的N-N关联 嵌套select的N-N关联映射基于嵌套select的映射时,可指定如下独有属性:项目0522基于嵌套select的N-N使用@Many注解嵌套select的N-N关联映射 【备注】:对于N-N关联,底层数据表不能直接使用主外键关联来管理,必须使用连接表来管理关联关系。 只要…