input输入事件

news2024/11/30 12:39:00

我要实现input输入框一边输入,一边在控制台输出结果

现有如下代码

<body>
  <input type="text" onchange="myFunction()" />
  <script>
     function myFunction(){
       console.log('999')
    }
  </script>
</body>

当敲下回车键后才会输出999,并不会一边输入,一边输出。

gpt给出答案

<body>
  <input type="text" oninput="outputResult(this.value)">
  <script>
    function outputResult(value) {
      console.log(value)
  }
  </script>
</body>

在vue3中使用ref结合v-model

const inputValue = ref("");
const handleClick = () => {
  console.log(inputValue.value); // 获取input的值
};
<input v-model="inputValue" />
    <button @click="handleClick">提交</button>

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

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

相关文章

用python爬豆瓣电影《热烈》短评

一、爬虫对象-豆瓣电影短评 今天分享一期爬虫案例&#xff0c;爬取的目标是&#xff1a;豆瓣上任意一部电影的短评&#xff08;注意&#xff1a;是短评&#xff0c;不是影评&#xff01;&#xff09;&#xff0c;以《热烈》这部电影为例&#xff1a; ▲ 爬取目标 爬取以上6个…

阿里云-源码构建容器镜像

1、阿里云Code代码平台 1.1 创建访问令牌。 登录云效Codeup控制台&#xff0c;单击右上角个人设置。 在个人设置页面&#xff0c;单击左侧导航栏中的个人访问令牌。 单击创建访问令牌&#xff0c;设置配置项&#xff0c;然后单击立即创建。以下为创建访问令牌需要授予的最小权…

【C语言】【strcpy的使用和模拟实现】

1.strcpy的使用&#xff1a; char* strcpy(char* destination,const char* source)返回类型是字符指针&#xff0c;参数是接受方字符串的首地址和要拷贝的字符串的首地址 从接受地的‘\0’开始拷贝&#xff0c;会将源字符串中的’\0’也拷贝过来目标空间必须足够大&#xff0…

PASCAL VOC2012数据集以及制作自己的数据集

目录 VOC2012目录结构制作自己的数据集标注图片软件使用流程软件使用 VOC2012目录结构 制作自己的数据集 标注图片软件 github开源项目&#xff0c;形成的是xml文件格式 使用流程 软件使用

docker四种网络模式

文章目录 一.为什么要了解docker网络二.docker 网络理论三.docker的四类网络模式3.1 bridge模式3.2 host模式3.3 container模式3.4 none模式 四.bridge模式下容器的通信4.1 防火墙开启状态4.2 防火墙关闭状态 一.为什么要了解docker网络 当你开始大规模使用Docker时&#xff0…

简单讲讲在一台机器上用docker部署hadoop HDFS

为什么写这篇文章? 老东西叫我用vmvare部署hadoop,我觉得这简直蠢毙了,让我们用docker和docker-compose来快速的过一遍如何使用docker-compose来部署简单的hadoop集群范例 写在前面,一定要看我!!! 还有注意&#xff01;Hadoop中的主机名不能带-或者_ 注意了!一定注意存储空…

uboot 顶层Makefile-make xxx_deconfig过程说明三

一. uboot 的 make xxx_deconfig配置 本文接上一篇文章的内容。地址如下&#xff1a;uboot 顶层Makefile-make xxx_deconfig过程说明二_凌肖战的博客-CSDN博客 本文继续来学习 uboot 源码在执行 make xxx_deconfig 这个配置过程中&#xff0c;顶层 Makefile有关的执行思路。 …

SpringBoot临时属性简单说明

1.修改工程的端口 说明&#xff1a;将工程的端口修改成8080端口 java -jar .\springboot_09_ssmp-0.0.1-SNAPSHOT.jar --server.port8080 修改前 修改后 2.修改连接数据库密码 说明&#xff1a;修改的是application.yml中password的值 java -jar .\springboot_09_ssmp-0.0…

就业这么难,十个软件测试项目帮你简历优化!

简历中项目经验太苍白&#xff0c;面试官一眼假&#xff0c;没有面试邀约&#xff0c;倒在海投第一步&#xff0c;看看这十个项目&#xff0c;总有一个你需要的&#xff01; 1.selenium定位web元素(12306抢票实战项目) 项目测试目的 学会Selenium定位web元素的方法熟练浏览器…

【基础知识】一网络不通问题处理记录

哈喽&#xff0c;大家好&#xff0c;我是雷工&#xff01; 在项目现场数据采集过程中&#xff0c;经常会遇到网络问题&#xff0c;最近又遇到一个网络问题。 下面记录处理过程&#xff0c;方便遇到类似问题时能快速处理。 一、问题描述 现场有5个西门子S71200/1500PLC系统&am…

导数的应用、单调性、极值、最大最小值

函数的单调性 函数的单调性是一个重要的性质&#xff0c;它描述了函数在某个区间上的变化趋势。如果函数在某个区间上单调递增&#xff0c;那么在这个区间上&#xff0c;随着自变量的增大&#xff0c;函数值也会增大&#xff1b;反之&#xff0c;如果函数在某个区间上单调递减&…

事件循环机制-Event-Loop

一&#xff1a;什么是浏览器的事件循环机制&#xff1f; 浏览器的事件循环是指在Web浏览器中对事件的处理机制。它是基于异步编程模型&#xff0c;运行在JS的引擎之中 二&#xff1a;浏览器的进程和线程 首先要了解我们所编写的JJS代码最终是怎么在浏览器中执行的 浏览器是一…

【牛客面试必刷TOP101】Day4.BM15删除有序链表中重复的元素-I和BM17二分查找-I

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;牛客面试必刷TOP101 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01;&…

IDEA双击无效打不开

IDEA双击无效&#xff0c;打不开 一、表象&#xff1a; 1、页面快捷键双击无效&#xff0c;打不开idea 2、bin目录下的idea64.exe点击也无效 二、排查 1、idea/bin目录下有个format.bat文件&#xff0c;将文件重命名为format.txt&#xff0c;然后编辑&#xff0c;在最后一…

浅谈C++|STL之map篇

一.map 1.1map概念 简介: map中所有元素都是pairpair中第一个元素为key(键值)&#xff0c;起到索引作用&#xff0c;第二个元素为value(实值)所有元素都会根据元素的键值自动排序 本质: . map/multimap属于关联式容器&#xff0c;底层结构是用二叉树实现。 优点: 可以根…

富斯I6刷10通道固件

使用USB转串口模块刷写10通道固件 一、下载固件 1. 十通道英文固件 下载地址: https://github.com/benb0jangles/FlySky-i6-Mod-/tree/master 选择 FlySky-i6-Mod–master \ 10ch Mod i6 Updater \ 10ch_MOD_i6_Programmer_V1 路径下的文件,亲测可用。 2. 原版六通道中…

[Linux]进程间通信--管道

[Linux]进程间通信–管道 文章目录 [Linux]进程间通信--管道进程间通信的目的实现进程间通信的原理匿名管道匿名管道的通信原理系统接口管道特性管道的协同场景管道的大小 命名管道使用指令创建命名管道使用系统调用创建命名管道 进程间通信的目的 数据传输&#xff1a;一个进…

JL-A/41 JL-A/42 JL-A/43 集成电路电流继电器 过负荷或短路 JOSEF约瑟

JL-A、B集成电路电流继电器 JL-A/11 JL-A/31 JL-A/12 JL-A/32 JL-A/13 JL-A/33 JL-A/21 JL-A/22 JL-A/23 JL-A/34 JL-A/35 JL-B/41 JL-A/42 JL-B/43 JL-B/11 JL-B/31 JL-B/12 JL-B/32 JL-B/13 JL-B/33 JL-B/21 JL-B/22 JL-B/23 JL-B/34 JL-B/35 JL-B/41 JL-B/42 …

Android性能优化之应用瘦身(APK瘦身)

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、概览2.1 apk组成 三、优化方向3.1 源代码3.1.1 代码混…

bootstrap-datepicker实现只能选择每一年的某一个月份

1、问题描述 最近碰到一个需求&#xff0c;要求日期控件选择的时候&#xff0c;只能选择某一年的1月份。 2、解决方法 使用setStartDate()和setEndDate()函数对日期选择框进行范围限制。 3、我的代码 【免费】bootstrap-datepicker实现只能选择每一年的某一个月份资源-CSDN文库…