vue3可以快速简单的操作dom元素了

       再也不需要用document.getElementById("myElement")的这种方式来对dom元素进行操作了

我们需要使用模板引用——也就是指向模板中一个 DOM 元素的 ref。我们需要通过这个特殊的 ref attribute 来实现模板引用:

<script setup>
import { ref, onMounted } from 'vue'

const pElementRef = ref(null)

onMounted(() => {
  pElementRef.value.textContent = 'mounted!'
})
</script>

<template>
  <p ref="pElementRef">Hello</p>
</template>

注意:这个 ref 使用 null 值来初始化。这是因为当 <script setup> 执行时,DOM 元素还不存在。模板引用 ref 只能在组件挂载后访问。

运行结果:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【linux】docker安装下载器:aria2、gopeed、thunder迅雷

一、aria2 1、下载aria2服务镜像 docker pull p3terx/aria2-pro 2、下载ariang页面服务 docker pull p3terx/ariang 3、启动aria2服务 docker run -d --name aria2 \ --restart unless-stopped \ --log-opt max-size1m \ -e PUID$UID \ -e PGID$GID \ -e UMASK_SET022 \ -…

基于电导增量MPPT控制算法的光伏发电系统simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 基于电导增量MPPT控制算法的光伏发电系统simulink建模与仿真。输出MPPT跟踪后的系统电流&#xff0c;电压以及功率。 2.系统仿真结果 3.核心程序与模型 版本&#xff1a;MAT…

Facebook的创新实验室:人工智能与新技术探索

Facebook作为全球领先的社交媒体平台之一&#xff0c;一直在不断探索和应用最新的技术来改善用户体验、推动创新和拓展业务边界。其创新实验室更是探索人工智能&#xff08;AI&#xff09;和新技术的前沿&#xff0c;为未来的社交媒体发展开辟了新的可能性。本文将深入探讨Face…

深度学习复盘与论文复现A

文章目录 一、查漏补缺复盘1、python中zip()用法2、Tensor和tensor的区别3、计算图中的迭代取数4、nn.Modlue及nn.Linear 源码理解5、知识杂项思考列表6、KL散度初步理解 二、处理多维特征的输入1、逻辑回归模型流程2、Mini-Batch (N samples) 三、加载数据集1、Python 魔法方法…

神经网络的工程基础(二)——随机梯度下降法|文末送书

相关说明 这篇文章的大部分内容参考自我的新书《解构大语言模型&#xff1a;从线性回归到通用人工智能》&#xff0c;欢迎有兴趣的读者多多支持。 本文涉及到的代码链接如下&#xff1a;regression2chatgpt/ch06_optimizer/stochastic_gradient_descent.ipynb 本文将讨论利用…

Linux下CPU1000%记一次挖矿病毒清理流程

今天top后发现一个进程CPU高1795%&#xff0c;判断是病毒 查找进程ps -elf|grep 进程idpid和ppid查找到sleep进程 ps -ef|grep 4277 查看具体进程内容&#xff0c;ll /proc/进程idpid ll /proc/4277 ls -l /proc/{pid号} ls -l /proc/{pid号}/exe kill掉病毒进程 排查病毒…

Android开机动画的结束过程BootAnimation(基于Android10.0.0-r41)

文章目录 Android 开机动画的结束过程BootAnimation(基于Android10.0.0-r41) Android 开机动画的结束过程BootAnimation(基于Android10.0.0-r41) 路径frameworks/base/cmds/bootanimation/bootanimation_main.cpp init进程把我们的BootAnimation的二进制文件拉起来了&#xf…

如何备份RDK X3(旭日X3派)的 SD卡镜像

该方法可以在Ubuntu的开发机上生成一个img镜像&#xff0c;后续可以直接使用rufus软件烧录备份好的镜像。 Step 1&#xff1a;在Ubuntu的开发机上安装gparted软件 如果安装失败则需要为您的Ubuntu开发机换源&#xff0c;这里推荐阿里源&#xff1a;https://developer.aliyun.…

用户购物性别模型标签(USG)之决策树模型

一、USG模型引入: 首先了解一下&#xff0c;如何通过大数据来确定用户的真实性别&#xff0c; 经常谈论的用户精细化运营&#xff0c;到底是什么? 简单来讲&#xff0c;就是将网站的每个用户标签化&#xff0c;制作一个属于用户自己的网络身份证。然后&#xff0c;运营人员 通…

【算法】贪心算法简介

贪心算法概述 目录 1.贪心算法概念2.贪心算法特点3.贪心算法学习 1.贪心算法概念 贪心算法是一种 “思想” &#xff0c;即解决问题时从 “局部最优” 从而达到 “全局最优” 的效果。 ①把解决问题的过程分为若干步②解决每一步时候&#xff0c;都选择当前最优解(不关注全局…

基于SSM前后端分离版本的论坛系统-自动化测试

目录 前言 一、测试环境 二、环境部署 三、测试用例 四、执行测试 4.1、公共类设计 创建浏览器驱动对象 测试套件 释放驱动类 4.2、功能测试 注册页面 登录页面 版块 帖子 用户个人中心页 站内信 4.3、界面测试 注册页面 登录页面 版块 帖子 用户个人中心页…

数据整理操作及众所周知【数据分析】

各位大佬好 &#xff0c;这里是阿川的博客&#xff0c;祝您变得更强 个人主页&#xff1a;在线OJ的阿川 大佬的支持和鼓励&#xff0c;将是我成长路上最大的动力 阿川水平有限&#xff0c;如有错误&#xff0c;欢迎大佬指正 Python 初阶 Python–语言基础与由来介绍 Python–…

进程与线程(二)

进程与线程&#xff08;二&#xff09; exec函数族守护进程守护进程的概念Linux守护进程的编写步骤创建子进程&#xff0c;父进程退出在子进程中创建新会话改变当前目录为根目录重设文件权限掩码关闭文件描述符守护进程案例编写 线程线程的概念Linux下进程和线程的区别 Linux下…

C++基础编程100题-002 OpenJudge-1.1-04 输出保留3位小数的浮点数

更多资源请关注纽扣编程微信公众号 002 OpenJudge-1.1-04 输出保留3位小数的浮点数 http://noi.openjudge.cn/ch0101/04/ 描述 读入一个单精度浮点数&#xff0c;保留3位小数输出这个浮点数。 输入 只有一行&#xff0c;一个单精度浮点数。 输出 也只有一行&#xff0c;…

java —— 集合

一、集合的概念 集合可以看做是一个存储对象的容器&#xff0c;与数组不同的是集合可以存储不同类型的对象&#xff0c;但开发中一般不这样做。集合不能存储基本类型的对象&#xff0c;如果存储则需要将其转化为对应的包装类。 二、集合的分类 集合分为 Collection 和 Map 两…

2024抖音流量认知课:掌握流量底层逻辑,明白应该选择什么赛道 (43节课)

课程下载&#xff1a;https://download.csdn.net/download/m0_66047725/89360865 更多资源下载&#xff1a;关注我。 课程目录 01序言&#xff1a;拍前请看.mp4 02抖音建模逻辑1.mp4 03抖音标签逻辑2.mp4 04抖音推流逻辑3.mp4 05抖音起号逻辑4.mp4 06养号的意义.mp4 0…

算法解析——单身狗问题

欢迎来到博主的专栏&#xff1a;算法解析 博主ID代码小豪 文章目录 什么是单身狗问题leetcode_136——只出现一次的数字I使用位运算解决单身狗问题。 leetcode_137——只出现一次的数字II统计二进制数解决单身狗问题leetcode_260 只出现一次数字III分区域按位异或解决问题。 总…

iperf3带宽压测工具使用

iperf3带宽压测工具使用 安装下载地址&#xff1a;[下载入口](https://iperf.fr/iperf-download.php)测试结果&#xff1a;时长测试&#xff08;压测使用&#xff09;:并行测试反向测试UDP 带宽测试 iPerf3 是用于主动测试 IP 网络上最大可用带宽的工具 安装 下载地址&#x…

SAP 生产订单批量报工(代码分享)

最近公司一直在对成本这块的业务进行梳理,影响比较大的就是生产这块的报工,经常会要求要批量的冲销报工,然后在继续报工,来调整生产订单的实际工时,前面的博客中已经给大家分享了批量冲销生产订单的代码, 下面给大家分享一下生产订单批量报工的代码 首先流程制造和离散制…

如何解决研发数据传输层面安全可控、可追溯的共性需求?

研发数据在企业内部跨网文件交换&#xff0c;是相对较为普遍而频繁的文件流转需求&#xff0c;基于国家法律法规要求及自身安全管理需要&#xff0c;许多企业进行内部网络隔离。不同企业隔离方案各不相同&#xff0c;比如银行内部将网络隔离为生产网、办公网、DMZ区&#xff0c…