Vue3【十五】标签的Ref属性
Vue3【十五】标签的Ref属性
标签的ref属性 用于注册模板引用
用在dom标签上,获取的是dom节点
用在组件上,获取的是组件实例对象
案例截图

目录结构

代码
app.vue
<template><div class="app"><h1 ref="title2">你好世界! 我是App根组件</h1><button @click="showLog">点我输出h1标签></button><Person ref="rrr" /></div>
</template><script lang="ts" setup name="App">
import Person from './components/Person.vue'
import { ref } from 'vue'let title2 = ref()
let rrr = ref()function showLog() {console.log(title2.value)console.log(rrr.value)
}// export default {
// name: 'App', //组件名字
// // 注册组件
// components: {
// Person
// }
// }</script><style>
.app {background-color: #4fffbb;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
</style>
person.vue
<template><div class="person"><h1>标签ref属性</h1><h2 ref="title2">需求:转速大于2000时候换挡位,不能超过D6挡位</h2><h2>转速</h2><button @click="showLog">点击输出 ref = title2 的元素</button></div>
</template><script lang="ts" setup>
import { ref } from 'vue';// 标签的ref属性 用于注册模板引用
// 用在dom标签上,获取的是dom节点
// 用在组件上,获取的是组件实例对象// 创建一个title2的ref,用于存储ref标记的内容
const title2 = ref();
let a = ref(0);
let b = ref(1);
let c = ref(2);
function showLog() {console.log(title2.value);
}// 将ref对象暴漏给父组件
defineExpose({ a, b, c });</script><style scoped>
.person {background-color: #ff9e4f;box-shadow: 0 0 10px;border-radius: 30px;padding: 30px;
}button {margin: 0 10px;padding: 0 5px;box-shadow: 0 0 5px;;
}
</style>
相关文章:
Vue3【十五】标签的Ref属性
Vue3【十五】标签的Ref属性 标签的ref属性 用于注册模板引用 用在dom标签上,获取的是dom节点 用在组件上,获取的是组件实例对象 案例截图 目录结构 代码 app.vue <template><div class"app"><h1 ref"title2">你…...
Java实现数据结构——顺序表
目录 一、前言 二、实现 2.1 增 2.2 删 2.3 查 2.4 改 2.5 销毁顺序表 三、Arraylist 3.1 构造方法 3.2 常用操作 3.3 ArrayList遍历 四、 ArrayList具体使用 4.1 杨辉三角 4.2 简单洗牌算法 一、前言 笔者在以前的文章中实现过顺序表 本文在理论上不会有太详细…...
线程知识点总结
Java线程是Java并发编程中的核心概念之一,它允许程序同时执行多个任务。以下是关于Java线程的一些关键知识点总结: 1. 线程的创建与启动 继承Thread类:创建一个新的类继承Thread类,并重写其run()方法。通过创建该类的实例并调用st…...
计算机网络:数据链路层 - 扩展的以太网
计算机网络:数据链路层 - 扩展的以太网 集线器交换机自学习算法单点故障 集线器 这是以前常见的总线型以太网,他最初使用粗铜轴电缆作为传输媒体,后来演进到使用价格相对便宜的细铜轴电缆。 后来,以太网发展出来了一种使用大规模…...
视频修复工具,模糊视频变清晰!
老旧视频画面效果差,视频效果模糊。我们经常找不到一个好的工具来让视频更清晰,并把它变成高清画质。相信很多网友都会有这个需求,尤其是视频剪辑行业的网友,经常会遇到这个问题。今天给大家分享一个可以把模糊视频修复清晰的工具…...
协程库——面试问题
1 同步、异步 1.1 同步 代码顺序执行,完全由用户控制. 同步阻塞 等待可读、可写的时候阻塞,不让出cpu。读、写之后,下面的代码才能执行、 同步非阻塞 等待可读、可写时,不会阻塞cpu,返回失败,设置错误码为…...
数据结构与算法题目集(中文)6-2顺序表操作集
题目地址 https://pintia.cn/problem-sets/15/exam/problems/type/6?problemSetProblemId725&page0 注意审题,返回false的时候不要返回ERROR,否则答案错误,机器规则是死的。 位置一般指数组下标,位序一般指数组下标1。但是思…...
8086 汇编笔记(十二):int 指令 端口 直接定址表
一、int 指令 int 指令的格式为:int n,n 为中断类型码,它的功能是引发中断过程 CPU 执行 intn 指令,相当于引发一个n号中断的中断过程,执行过程如下: (1) 取中断类型码 n; (2) 标志寄存器入栈,IF0&…...
揭开FFT时域加窗的奥秘
FFT – Spectral Leakage 假设用于ADC输出数据分析的采样点数为N,而采样率为Fs,那我们就知道,这种情况下的FFT频谱分辨率为δf,那么δfFs/N。如果此时我们给ADC输入一个待测量的单频Fin,如果此时Fin除以δf不是整数&a…...
【AI基础】第二步:安装AI运行环境
开局一张图: 接下来按照从下往上的顺序来安装部署。 规则1 注意每个层级的安装版本,上层的版本由下层版本决定 比如CUDA的版本,需要看显卡安装了什么版本的驱动,然后CUDA的版本不能高于这个驱动的版本。 这个比较好理解&…...
【MySQL】聊聊唯一索引是如何加锁的
首先我们要明确,加锁的对象是索引,加锁的基本单位是next-key lock,由记录锁和间隙锁组成。next-key是前开后闭区间,间隙锁是前开后开区间。根据不同的查询条件next-key 可能会退化成记录锁或间隙锁。 在能使用记录锁或者间隙锁就…...
k8s-CCE使用node节点使用VIP--hostNetworkhostPort
CCE使用node节点使用VIP 背景:想在节点上使用VIP,将nodeport服务做到高可用。启动VIP后发现访问失败 部署 ! Configuration File for keepalived global_defs { router_id master-node }vrrp_instance VI_1 {state BACKUPinterface eth0mcast_src_ip 10.1.0.60virtual_rou…...
18、关于优化中央企业资产评估管理有关事项的通知
一、加强重大资产评估项目管理 (一)中央企业应当对资产评估项目实施分类管理,综合考虑评估目的、评估标的资产规模、评估标的特点等因素,合理确定本集团重大资产评估项目划分标准,原则上,企业对外并购股权项目应纳入重大资产评估项目。中央企业应当研究制定重大资产评估…...
AI大模型日报#0610:港大等1bit大模型“解决AI能源需求”、谷歌开源TimesFM时序预测模型
导读:AI大模型日报,爬虫LLM自动生成,一文览尽每日AI大模型要点资讯!目前采用“文心一言”(ERNIE 4.0)、“零一万物”(Yi-Large)生成了今日要点以及每条资讯的摘要。欢迎阅读…...
速盾:图片cdn加速 免费
随着互联网的快速发展,图片在网页设计和内容传播中起着重要的作用。然而,随着网站访问量的增加和图片文件大小的增加,图片加载速度可能会成为一个问题。为了解决这个问题,许多网站使用图片CDN加速服务。 CDN(Content …...
贪心算法例子
贪心算法概述 贪心算法是一种在每一步选择中都做出局部最优选择的算法,以期望通过一系列局部最优选择达到全局最优。贪心算法在许多优化问题中表现良好,特别是在某些特定类型的问题中能够保证找到最优解。 活动选择问题(Activity Selection Problem)背包问题(贪心解法)霍…...
vivado HW_ILA_DATA、HW_PROBE
HW_ILA_DATA 描述 硬件ILA数据对象是ILA调试核心上捕获的数据的存储库 编程到当前硬件设备上。upload_hw_ila_data命令 在从ila调试移动捕获的数据的过程中创建hw_ila_data对象 核心,hw_ila,在物理FPGA上,hw_device。 read_hw_ila_data命令还…...
refault distance算法的一点理解
这个算法看了好几次了,都没太理解,今天记录一下,加深一下印象。 引用某个博客对这个算法的介绍 一次访问page cache称为fault,第二次访问该页面称为refault。page cache页面第一次被踢出LRU链表并回收(eviction)的时刻称为E&#…...
软件安全技术【太原理工大学】
没有划重点,只说了一句课后题和实验中的内容都可能会出。 2022考试题型:选择20个20分,填空10个10分,名词解释4个20分,简答6个30分,分析与论述2个20分,没找到历年题。 如此看来,这门考…...
异常(Exception)
异常是什么 异常就是程序在进行时的不正常行为,就像之前数组时会遇到空指针异常(NullPointerException),数组越界异常(ArrayIndexOutOfBoundsException)等等。 在java中异常由类来表示。 异常的分类 异常…...
【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密
在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...
Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
Python 包管理器 uv 介绍
Python 包管理器 uv 全面介绍 uv 是由 Astral(热门工具 Ruff 的开发者)推出的下一代高性能 Python 包管理器和构建工具,用 Rust 编写。它旨在解决传统工具(如 pip、virtualenv、pip-tools)的性能瓶颈,同时…...
中医有效性探讨
文章目录 西医是如何发展到以生物化学为药理基础的现代医学?传统医学奠基期(远古 - 17 世纪)近代医学转型期(17 世纪 - 19 世纪末)现代医学成熟期(20世纪至今) 中医的源远流长和一脉相承远古至…...
面向无人机海岸带生态系统监测的语义分割基准数据集
描述:海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而,目前该领域仍面临一个挑战,即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...
安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲
文章目录 前言第一部分:体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分:体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...
三分算法与DeepSeek辅助证明是单峰函数
前置 单峰函数有唯一的最大值,最大值左侧的数值严格单调递增,最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值,最小值左侧的数值严格单调递减,最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...
【网络安全】开源系统getshell漏洞挖掘
审计过程: 在入口文件admin/index.php中: 用户可以通过m,c,a等参数控制加载的文件和方法,在app/system/entrance.php中存在重点代码: 当M_TYPE system并且M_MODULE include时,会设置常量PATH_OWN_FILE为PATH_APP.M_T…...
大数据治理的常见方式
大数据治理的常见方式 大数据治理是确保数据质量、安全性和可用性的系统性方法,以下是几种常见的治理方式: 1. 数据质量管理 核心方法: 数据校验:建立数据校验规则(格式、范围、一致性等)数据清洗&…...
向量几何的二元性:叉乘模长与内积投影的深层联系
在数学与物理的空间世界中,向量运算构成了理解几何结构的基石。叉乘(外积)与点积(内积)作为向量代数的两大支柱,表面上呈现出截然不同的几何意义与代数形式,却在深层次上揭示了向量间相互作用的…...
