vue3打开页面后文本框自动获得焦点

news2024/11/15 8:17:54

字符串写法

<script setup>
import { ref, onMounted } from 'vue'
import './index.css'

const input = ref(null)



onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <div class="m-home-wrap">
    <input ref="input" />
    <div class="m-home-demo"></div>
  </div>
</template>

<style></style>

函数写法

<script setup>
import { ref, onMounted } from 'vue'
import './index.css'

const input = ref(null)

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <div class="m-home-wrap">
    <input
      :ref="
        (el) => {
          input = el
        }
      "
    />
    <div class="m-home-demo"></div>
  </div>
</template>

<style></style>

人工智能学习网站

https://chat.xutongbao.top

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

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

相关文章

[NSSRound#1 Basic]basic_check

[NSSRound#1 Basic]basic_check 开题什么都没有&#xff0c;常规信息搜集也无效 发现题目允许PUT的两种做法&#xff1a; 1、 CURL的OPTIONS请求方法查看允许的请求方式 curl -v -X OPTIONS http://node4.anna.nssctf.cn:28545/index.php2、 kali自带的nikto工具扫描网址 Nik…

已经有 Prometheus 了,还需要夜莺?

谈起当下监控&#xff0c;Prometheus 无疑是最火的项目&#xff0c;如果只是监控机器、网络设备&#xff0c;Zabbix 尚可一战&#xff0c;如果既要监控设备又要监控应用程序、Kubernetes 等基础设施&#xff0c;Prometheus 就是最佳选择。甚至有些开源项目&#xff0c;已经内置…

css z-Index 详解--子元素盖在父元素的兄弟元素上

前置知识 1、z-index 只有在定位元素上才会生效&#xff08;即非static定位的元素上&#xff09; 2、同级元素&#xff0c;无论是z-index 相同还是没设置。后面的元素层级比前面 3、元素上有 transform 属性 z-index 会失效 dom结构如下 // dom部分 <div><div id&quo…

数学建模资料|历年数维杯数学建模竞赛真题及获奖论文汇总

2024年第九届数维杯大学生数学建模挑战赛&#xff1a;2024年5月10日08:00-5月13日09:00举行&#xff0c;为了更好的帮助参赛同学了解竞赛的赛制及赛题特点&#xff0c;数乐君今天给大家整理了历年数维杯国赛真题及优秀论文&#xff0c;方便同学们赛前巩固训练&#xff0c;掌握解…

私人健身教练预约管理小程序开发源码现成案例(小程序+APP+H5 源码部署)

一、私人健身教练预约管理系统-环境介绍 1.1 私人健身教练预约管理系统-运行环境 开发语言&#xff1a;PHP 数据库&#xff1a;MySQL 系统架构&#xff1a;TP 后端&#xff1a;SpringBoot 前端&#xff1a;Vue 2. 私人健身教练预约管理系统-系统介绍。 2.1私人健身教练预约管…

实在Agent智能体:引领智能自动化新纪元

在数字化转型的浪潮中&#xff0c;实在智能科技有限公司凭借其前沿技术&#xff0c;推出了实在Agent智能体——一款革命性的超自动化智能体。它不仅代表了人工智能技术的新高度&#xff0c;更预示着未来工作方式的变革。 什么是实在Agent智能体&#xff1f; 实在Agent智能体是…

拼多多投产比怎么计算?

拼多多投产比&#xff08;ROI&#xff09;的计算公式为&#xff1a;ROI 成交金额 / 花费 100%。也可以简单理解为&#xff1a;ROI 点击量 * 转化率 * 客单价 / (点击量 * 平均点击花费)。 拼多多推广可以使用3an推客。3an推客&#xff08;CPS模式&#xff09;给商家提供的营…

acronym 数据集

raise gl.ContextException(Could not create GL context) conda install -c conda-forge libstdcxx-ng ImportError: trimesh.viewer.windowed requires pip install "pyglet<2" pip install pyglet1.5.28github上的示例 3D 场景下的 RGBD Mask

Fortinet的安全愿景SASO概述

FTNT SASE的独特方法&#xff0c;使其成为一家适应性极强的厂商&#xff0c;能够应对不断变化的网络和网络安全环境。FTNT开发了一种名为Secure Access Service Omni&#xff08;SASO&#xff09;的变体&#xff0c;以更准确地反映FTNT在融合网络和安全功能方面的实力。我们预计…

老牌Git客户端 mac软件 SmartGit 汉化教程 及安装教程

SmartGit for Mac一款 Git 版本控制系统的图形化客户端程序&#xff0c;它能在您的工作上满足您的需求&#xff0c;smartgit是一个企业级的Git、Mercurial、以及Subversion图形化客户端软件&#xff0c;功能非常强大&#xff0c;它可以简单快速的实现Git及Mercurial中的版本控制…

SaaS、PaaS、IaaS、DaaS功能区别、优缺点以及关联简述

目前主流的IaaS、PaaS和SaaS产品 简述应用方案 这里借用汽车的例子对IaaS、PaaS、SaaS的解释进一步阐述三者的区别。 假设你需要出去外出使用交通工具&#xff0c;我们有四种的方案&#xff1a; On-premise&#xff08;本地部署服务&#xff09; 自己开车&#xff0c;需要维护…

容器化管理SpringBoot项目:在用jar包制作镜像的时候遇到的错误记录

在容器化管理SpringBoot项目&#xff0c;进行到“用jar包制作镜像”一步时&#xff0c;遇到的error真的是一环接着一环&#xff0c;这里就记录一下&#xff0c;一套流程下来遇到的error&#xff0c;以及一些我的解决方法&#xff1a; ERROR: "docker buildx build" r…

前端css中径向渐变(radial-gradient)的使用

前端css中径向渐变的使用 一、前言二、主要内容说明&#xff08;一&#xff09;、径向渐变的形状1.椭圆形渐变&#xff08;ellipse&#xff09;&#xff0c;源码12.源码1运行效果3.圆形渐变&#xff08;circle&#xff09;&#xff0c;源码24.源码2运行效果 &#xff08;二&…

【强训笔记】day14

NO.1 思路&#xff1a;用一个哈希表&#xff0c;先遍历s1&#xff0c;统计哈希表内的字符个数&#xff0c;在遍历s2&#xff0c;s2中的字符在哈希表中减去&#xff0c;如果哈希表中的字符个数小于0那么就输出No。 代码实现&#xff1a; #include <iostream> #include&…

使用网络工具监控网络性能

网络工具和实用程序有助于有效地检测网络问题&#xff0c;诊断其原因和位置&#xff0c;以及缓解和解决问题&#xff0c;这有助于确保网络环境的稳定性&#xff0c;使用户免受设备连接问题带来的麻烦。 网络工具已经成为每个网络管理员用于有效诊断和处理网络问题的解决方案中…

5 Spring 事务管理

目录 1.概述 2.事务特性&#xff1a;ACID 3.Spring 框架的事务管理支持两种方式 编程式事务 申明式事务 4.Spring 事务管理 API 事务管理器接口 Spring 的回滚方式 事务定义接口 事务的四种隔离级别 事务的七种传播行为 5.事务注解例子&#xff1a; Transactianal…

【Java orm 框架比较】十 新增hammer_sql_db 框架对比

迁移到&#xff08;https://gitee.com/wujiawei1207537021/spring-orm-integration-compare&#xff09; orm框架使用性能比较 比较mybatis-plus、lazy、sqltoy、mybatis-flex、easy-query、mybatis-mp、jpa、dbvisitor、beetlsql、dream_orm、wood、hammer_sql_db 操作数据 …

关于GitHub仓库建立及提交问题

文章目录 前言GitHub仓库创建token令牌的获取GitHub克隆到本地GitHub上传文件 前言 为了整一个GitHub仓库然后上传文件&#xff0c;笔者看了不下100篇博客&#xff0c;20段教程&#xff0c;最后在两位大佬的帮助下&#xff0c;才整明白了&#x1f62d; 先提前说一嘴从 2021年8月…

Linux-02

Linux常用命令&#xff1a; ls: 列出目录touch: 创建文件 touch test.txt echo:往文件写内容echo "i love linux" >>test.txtcd&#xff1a;切换目录pwd&#xff1a;显示目前的目录mkdir&#xff1a;创建一个新的目录 mkdir dai:创建目录dai mkdir -p test1/t…

组件目录存放问题

目录 一、思考引入 二、组件分类 三、组件分类的目的 一、思考引入 .vue文件本质无区别&#xff0c;而路由相关的组件&#xff0c;为什么要放在views目录呢&#xff1f; 二、组件分类 .vue文件分2类&#xff1a;页面组件和复用组件。注意&#xff1a;都是.vue文件&#xff…