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

vue中ref的用法

vue中ref的用法

在项目中使用ref时有时候直接取值,有时候返回的却是一个数组,不知其中缘由,后查了一下ref用法,所以总结一下.

1.绑定在dom元素上时,用起来与id差不多,通过this.$refs来调用:
<div id="passCarEchart" ref="passCarEchart" style="height: 300px; width: 100%"></div>console.log(this.$refs.passCarEchart)

在这里插入图片描述
看到打印出来就是绑定的dom对象,可以用来执行一些dom操作,比如操作样式,获取属性等:

let passCarEchart= this.$refs.passCarEchart
passCarEchart.style.height = '200px'
passCarEchart.style.background = 'red'
console.log(passCarEchart.clientHeight)
2.如果refs自身的dom,或父级的dom是通过v-for渲染出来的,vue框架就会把refInFor设置成true,然后ref.key在registerRef函数就被设置成数组
<divv-for="item in csGroupNameArr":key="item"
><div ref="arrayDiv">{{ item }}</div>
</div>
this.$nextTick(() => {console.log(this.$refs.arrayDiv,'arrayDiv')})

在这里插入图片描述

3.ref除了这两个用法,还有另一种用法,绑定在组件标签上:

<CheckPointref="checkPoint"v-model="checkPointNumbers"@clearData="clearCheckPointData"></CheckPoint>
console.log(this.$refs.checkPoint)

在这里插入图片描述
可以看到这次和我们之前绑定在dom元素上有很大的不同,这次获取到的是一个VueComponent对象,里面有这个组件的各个属性,这些属性里面有一个$el,这就是dom对象,就是和我们直接绑定在dom元素上获取的一样:

console.log(this.$refs.checkPoint.$el)

在这里插入图片描述
通过$refs获取的对象中,我们可以看到里面还有我们设置在data里面的变量,我们是可以直接通过这种ref的方式去修改,它就等于拿到那个组件的this,可以直接调用,不仅是data里面的变量,还有methods里面的方法.

4.这种用法还可以在用ui框架的组件的时候,ui框架给我们提供了很多组件的方法,就是要通过这个ref去调用,比如说element-ui的树形组件

例子:

<el-form ref="personDialogForm" :inline="true" class="dialog-form" :model="form" :rules="dialogRules">

这里就不多介绍用法了,一般组件库官网中各自的用法.

相关文章:

vue中ref的用法

vue中ref的用法 在项目中使用ref时有时候直接取值,有时候返回的却是一个数组,不知其中缘由,后查了一下ref用法,所以总结一下. 1.绑定在dom元素上时&#xff0c;用起来与id差不多&#xff0c;通过this.$refs来调用: <div id"passCarEchart" ref"passCarEch…...

【华为OD题库-012】模拟消息队列-Java

题目 让我们来模拟一个消息队列的运作&#xff0c;有一个发布者和若干消费者 &#xff0c;发布者会在给定的时刻向消息队列发送消息。>若此时消息队列有消费者订阅&#xff0c;这个消息会被发送到订阅的消费者中优先级最高(输入中消费者按优先级升序排列)的一个。>若此时…...

Android修行手册 - 阴影效果的几种实现以及一些特别注意点

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列点击跳转>ChatGPT和AIGC &#x1f449;关于作者 专…...

【星海出品】SDN neutron (五) openvswitch

1、ovs-vswitchd组件是交换机的主要模块&#xff0c;运行在用户态&#xff0c;其主要负责基本的转发逻辑、地址学习、外部物理端口绑定等。还可以运用OVS自带的ovs-ofctl工具采用openflow协议对交换机进行远程配置和管理。 2、ovsdb-server组件是存储OVS的网桥等配置、日志以及…...

springboot整合vue2实现简单的新增删除,整合ECharts实现图表渲染

先看效果图&#xff1a; 1.后端接口 // 查询所有商品信息 // CrossOrigin(origins "*")RequestMapping("/list1")ResponseBodypublic List<Goodsinfo> list1(){List<Goodsinfo> list goodsService.list();return list;}// 删除 // …...

<蓝桥杯软件赛>零基础备赛20周--第5周--杂题-2

报名明年4月蓝桥杯软件赛的同学们&#xff0c;如果你是大一零基础&#xff0c;目前懵懂中&#xff0c;不知该怎么办&#xff0c;可以看看本博客系列&#xff1a;备赛20周合集 20周的完整安排请点击&#xff1a;20周计划 每周发1个博客&#xff0c;共20周&#xff08;读者可以按…...

数据结构哈希表(散列)Hash,手写实现(图文推导)

目录 一、介绍 二、哈希数据结构 三、✍️实现哈希散列 1. 哈希碰撞&#x1f4a5; 2. 拉链寻址⛓️ 3. 开放寻址⏩ 4. 合并散列 一、介绍 哈希表&#xff0c;也被称为散列表&#xff0c;是一种重要的数据结构。它通过将关键字映射到一个表中的位置来直接访问记录&#…...

【嵌入式设计】Main Memory:SPM 便签存储器 | 缓存锁定 | 读取 DRAM 内存 | DREM 猝发(Brust)

目录 0x00 便签存储器&#xff08;Scratchpad memory&#xff09; 0x01 缓存锁定&#xff08;Cache lockdown&#xff09; 0x02 读取 DRAM 内存 0x03 DREM Banking 0x04 DRAM 猝发&#xff08;DRAM Burst&#xff09; 0x00 便签存储器&#xff08;Scratchpad memory&#…...

dameng数据库数据id decimal类型,精度丢失

问题处理 这一次也是精度丢失&#xff0c;但是问题呢还是不一样&#xff0c;这一次所有的id都被加一了&#xff0c;只有id字段被加一&#xff0c;还有的查询查出来封装成对象之后对象的id字段被减一了&#xff0c;数据库id字段使用的decimal&#xff08;20,6&#xff09;&…...

python图神经网络,注意力机制、Transformer模型、目标检测算法、强化学习等

近年来&#xff0c;伴随着以卷积神经网络&#xff08;CNN&#xff09;为代表的深度学习的快速发展&#xff0c;人工智能迈入了第三次发展浪潮&#xff0c;AI技术在各个领域中的应用越来越广泛 本文重点为&#xff1a;注意力机制、Transformer模型&#xff08;BERT、GPT-1/2/3/…...

安装包 amd,amd64, arm,arm64 都有什么区别

现在的安装包也不省心&#xff0c;有各种版本都不知道怎么选。 根据你安装的环境配置。 amd&#xff1a; 32位X86 amd64&#xff1a; 64位X86 arm&#xff1a; 32位ARM arm64&#xff1a; 64位ARM amd64是X86架构的CPU&#xff0c;64位版。amd64又叫X86_64。主流的桌面PC&am…...

Ansible 企业实战详解

一、ansible简介1. ansible是什么2.ansible的特点ansible的架构图 二、ansible 任务执行1、ansible 任务执行模式2、ansible 执行流程3、ansible 命令执行过程 二 .Ansible安装部署1.yum安装2.ansible 程序结构3、ansible配置文件查找顺序4、ansible配置文件5.ansible自动化配置…...

云贝教育 |【技术文章】pg缓存插件介绍

一、pg_buffercache 主要作用是查看pg的共享池中缓存的对象信息 1.1 创建扩展 postgres# create extension pg_buffercache; CREATE EXTENSION 1.2 查看视图pg_buffercache postgres# \d pg_buffercacheView "public.pg_buffercache"Column | Type | Co…...

Kohana框架的安装及部署

Kohana框架的安装及部署 tipsKohana安装以及部署1、重要文件作用说明1.1 /index.php1.2 /application/bootstrap.php 2、项目结构3、路由配置3.1、隐藏项目入口的路由3.2、配置默认路由3.3、配置自定义的路由(Controller目录下的控制器)3.4、配置自定义的路由(Controller/direc…...

无重复字符的最长子串 Golang leecode_3

刚开始的思路&#xff0c;先不管效率&#xff0c;跑出来再说&#xff0c;然后再进行优化。然后就有了下面的暴力代码&#xff1a; func lengthOfLongestSubstring(s string) int {// count 用来记录当前最长子串长度var count int// flag 用来对下面两个 if 语句分流var flag …...

Vue项目的学习一

1、Vue项目里面的.js文件里面对象添加属性 例如&#xff1a;在对象&#xff1a;row&#xff0c;需要在对象row里面添加一个属性状态&#xff1a;type&#xff0c;使用里面的Vue.set函数 Vue.set(参数1,参数2,参数3) Vue.set(row,type,false)解析&#xff1a; 参数1&#xff1…...

k8s备份

cpu 磁盘io 往主的写&#xff0c;同步给备 rootk8s-etcd02:~# cat /etc/systemd/system/etcd.service [Unit] DescriptionEtcd Server Afternetwork.target Afternetwork-online.target Wantsnetwork-online.target Documentationhttps://github.com/coreos[Service] Typen…...

python自己造轮子使用

项目结构 首先&#xff0c;需要按照下列格式组织你的 package project &#xff08;项目名称&#xff0c;随意&#xff0c;与package无关&#xff09;|----package &#xff08;这个才是包名&#xff09;|----…...

Elastic stack8.10.4搭建、启用安全认证,启用https,TLS,SSL 安全配置详解

ELK大家应该很了解了&#xff0c;废话不多说开始部署 kafka在其中作为消息队列解耦和让logstash高可用 kafka和zk 的安装可以参考这篇文章 深入理解Kafka3.6.0的核心概念&#xff0c;搭建与使用-CSDN博客 第一步、官网下载安装包 需要 elasticsearch-8.10.4 logstash-8.…...

解决npm报错Error: error:0308010C:digital envelope routines::unsupported

解决npm报错Error: error:0308010C:digital envelope routines::unsupported。 解决办法&#xff1b;终端执行以下命令&#xff08;windows&#xff09;&#xff1a; set NODE_OPTIONS--openssl-legacy-provider然后再执行 npm命令成功&#xff1a;...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

AI语音助手的Python实现

引言 语音助手(如小爱同学、Siri)通过语音识别、自然语言处理(NLP)和语音合成技术,为用户提供直观、高效的交互体验。随着人工智能的普及,Python开发者可以利用开源库和AI模型,快速构建自定义语音助手。本文由浅入深,详细介绍如何使用Python开发AI语音助手,涵盖基础功…...