当前位置: 首页 > news >正文

vue3+ts 获取input 输入框中的值

从前端input 输入框获取值,通过封装axios 将值传给后端服务    数据格式为json

html 

<el-form>
<el-form-item label="域名"><el-input v-model="short_url" style="width: 240px"type="text"placeholder="请输入域名"clearable@click="submitDomain"/></el-form-item><el-form-item class="btn">   <!-- 按钮区域定义一个类 按钮向右对齐--><el-button type="primary" @click="" style="width: 5%; margin-top: 5px">域名</el-button></el-form-item></el-form>

ts 部分

<script setup lang=ts>
import { ref,reactive } from 'vue'v-model中的值将输入框中的值和short_url 双向绑定
const short_url = ref('')const submitDomain = async () => {console.log("获取域名", short_url.value)}
</script>

ref 与reactive 的区别?

ref 可以用于基本数据类型(如数字,字符串等)  也可以用于引用类型数据(如 对象 数组等)

操作单个数据且不需要响应式式时  可以使用ref 

ref 创建的基本类型, 可以直接通过.value 的形式访问和修改,如果是引入类型的数据, 可以直接进行访问和修改

当需要将数据传递给模板中的指令或组件时 通过用ref

reactive 主要用于创建响应式对象

当对象中属性发生变化时, 页面可以实时的展示变化数据时  可以使用reactive 

创建复杂的数据结构时, 通常使用ractive 

总结一下 ref 用于简单的数据管理, reactive 用于创建复杂的响应式数据

相关文章:

vue3+ts 获取input 输入框中的值

从前端input 输入框获取值&#xff0c;通过封装axios 将值传给后端服务 数据格式为json html <el-form> <el-form-item label"域名"><el-input v-model"short_url" style"width: 240px"type"text"placeholder&quo…...

Gin框架返回Protobuf类型:提升性能的利器

在构建高效、高性能的微服务架构时&#xff0c;数据序列化和反序列化的性能至关重要。Protocol Buffers&#xff08;简称Protobuf&#xff09;作为一种轻量级且高效的结构化数据存储格式&#xff0c;已经在众多领域得到广泛应用。Gin框架作为Go语言中流行的Web框架&#xff0c;…...

HTML满屏漂浮爱心

目录 写在前面 满屏爱心 代码分析 系列推荐 写在最后 写在前面 小编给大家准备了满屏漂浮爱心代码&#xff0c;一起来看看吧~ 满屏爱心 文件heart.svg <svg xmlns"http://www.w3.org/2000/svg" width"473.8px" height"408.6px" view…...

爬虫应该选择住宅ip代理还是数据中心代理?

住宅代理 住宅代理是互联网服务提供商 (ISP) 提供的 IP 地址&#xff0c;它们是附加到实际物理位置的真实IP地址。住宅代理允许用户通过目标区域内的真实IP地址连接到互联网。 数据中心代理 数据中心代理是指是使用数据中心拥有并管理IP的代理&#xff0c;IP地址来源于数据中…...

百面算法工程师目录 | 深度学习目标检测、语义分割、分类上百种面试问答技巧

本文给大家带来的百面算法工程师是深度学习面试目录大纲&#xff0c;文章内总结了常见的提问问题&#xff0c;旨在为广大学子模拟出更贴合实际的面试问答场景。在这篇文章中&#xff0c;可以点击题目直达问题答案处&#xff0c;方便查找问题寻找答案。节约大家的时间。通过对这…...

Java中Maven的依赖管理

依赖介绍 是指当前项目运行所需要的jar包&#xff0c;一个项目中可以引入多个依赖 配置 在pom.xml中编写<dependencies>标签 在<dependencies>中使用<dependency>引入标签 定义坐标的groupId、rtifactId、version 点击刷新按钮、引入新坐标 例如引入下…...

Github新手入门使用方法

**存在问题&#xff1a;**新手如何快速入门github&#xff0c;能够下载开源文件&#xff0c;并且修改后更新远程github仓库&#xff1b; 解决方案&#xff1a; 参考&#xff1a; http://www.360doc.com/content/24/0301/12/60419_1115656653.shtml https://blog.csdn.net/gongd…...

期权隐含波动率到底是什么意思?

今天期权懂带你了解期权隐含波动率到底是什么意思&#xff1f;期权隐含波动率解析。通俗的说&#xff0c;期权隐含波动率是在期权市场中买家和卖家对于&#xff0c;某一期权合约价格变动幅度大小的判断。 期权隐含波动率到底是什么意思&#xff1f; 隐含波动率是根据期权市场价…...

28、Flink 为管理状态自定义序列化

为管理状态自定义序列化 a&#xff09;概述 对状态使用自定义序列化&#xff0c;包含如何提供自定义状态序列化程序、实现允许状态模式演变的序列化程序。 b&#xff09;使用自定义状态序列化程序 注册托管 operator 或 keyed 状态时&#xff0c;需要 StateDescriptor 来指…...

【强训笔记】day17

NO.1 思路&#xff1a;用一个字符串实现&#xff0c;stoi函数可以转化为数字并且去除前导0。 代码实现&#xff1a; #include <iostream> #include<string> using namespace std;string s;int main() {cin>>s;for(int i0;i<s.size();i){if(s[i]%20) s[…...

平滑 3d 坐标

3d平滑 import torch import torch.nn.functional as F import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3Dclass SmoothOperator:def smooth(self, vertices):# 使用一维平均池化进行平滑vertices_smooth F.avg_pool1d(vertices.p…...

Go解析的数据类型可能含有不同数据结构的处理方式

最近做一个需求&#xff0c;各种业务消息都会往我的消息队列中写各种类型的数据&#xff0c;服务端需要接受各种不同的参数然后转换为本地数据结构&#xff0c;Go语言不确定上游传过来的数值是什么类型&#xff0c;然后又下面四种解决方案。 1. 类型断言和类型切换 func (Mis…...

Java网络编程基础

Java网络编程基础主要涉及进程间通信、网络通信协议、IP地址和端口以及Java提供的网络应用编程接口等核心概念。 进程间通信是Java网络编程的基础。进程是运行中的程序&#xff0c;而进程间通信则是指不同进程之间进行数据交换和共享信息的过程。在Java中&#xff0c;进程间的…...

鸿蒙DevEco Studio 4.1 Release-模拟器启动方式错误

软件版本&#xff1a;DevEco Studio 4.1 Release 报错提示&#xff1a; 没有权限查看处理指导 Size on Disk 显示1.0MB 尝试方案&#xff08;统统无效&#xff09;&#xff1a; 1、“windows虚拟机监控程序平台”、"虚拟机平台"已开启 启用CPU虚拟化 2、C…...

Linux与windows网络管理

文章目录 一、TCP/IP1.1、TCP/IP概念TCP/IP是什么TCP/IP的作用TCP/IP的特点TCP/IP的工作原理 1.2、TCP/IP网络发展史1.3、OSI网络模型1.4、TCP/IP网络模型1.5、linux中配置网络网络配置文件位置DNS配置文件主机名配置文件常用网络查看命令 1.6、windows中配置网络CMD中网络常用…...

一站式、低成本 | 等保一体机安全解决方案

方案建设背景 等级保护是我国关于信息安全的基本政策&#xff0c;相关政策制度要求单位开展等级保护工作。单位信息系统存在的安全隐患和不足&#xff0c;进行安全整改之后&#xff0c;提高信息系统的信息安全防护能力&#xff0c;降低系统被攻击的风险&#xff0c;维护单位良…...

Grafana(CVE-2021-43798)、Apache Druid 代码执行漏洞

文章目录 一、Grafana 8.x 插件模块目录穿越漏洞&#xff08;CVE-2021-43798&#xff09;二、Apache Druid 代码执行漏洞&#xff08;CVE-2021-25646&#xff09; 一、Grafana 8.x 插件模块目录穿越漏洞&#xff08;CVE-2021-43798&#xff09; Grafana是一个系统监测工具。 利…...

AI赋能EasyCVR视频汇聚/视频监控平台加快医院安防体系数字化转型升级

近来&#xff0c;云南镇雄一医院发生持刀伤人事件持续发酵&#xff0c;目前已造成2人死亡21人受伤。此类事件在医院层出不穷&#xff0c;有的是因为医患纠纷、有的是因为打架斗殴。而且在每日大量流动的人口中&#xff0c;一些不法分子也将罪恶的手伸到了医院&#xff0c;实行扒…...

Cocos Creator 3.x 实现触摸拖动物体(record)

参考&#xff1a;如何实现拖动物体 - Creator 3.x - Cocos中文社区 //注册触摸事件 node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this); //事件回调函数 onTouchMove(event) {const location event.getUILocation();event.target.setWorldPosition(location.x, lo…...

漏桶算法:稳定处理大量突发流量的秘密武器!

漏桶算法的介绍 我们经常会遇到这样一种情况&#xff1a;数据包的发送速率不稳定&#xff0c;而网络的带宽有限。如果在短时间内有大量的数据包涌入&#xff0c;那么网络就会出现拥塞&#xff0c;数据包的丢失率就会增大。为了解决这个问题&#xff0c;人们提出了一种叫做“漏…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

python爬虫:Newspaper3k 的详细使用(好用的新闻网站文章抓取和解析的Python库)

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...