vue里面的$refs获取包含多个div ,但是打印出来长度是1

最新推荐文章于 2023-08-21 16:40:01 发布
最新推荐文章于 2023-08-21 16:40:01 发布
阅读量1.5k 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41184962/article/details/106758545
版权

我想通过$refs 获取for的所有div,一开始我以为使用 this.$refs.mes获取到的是数组，然后再遍历出来就好，没想到获取的数组length长度为1。我也不知道为什么会这样，记录一下，

html代码：

 

结果如下：

 

最后打印数据类型才发现，获取到的是一个对象，长度当然是1

 

SoWhat~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中的$refs属性几个注意点
u010007013的博客
12-02 3523
1.在vue中获取dom推荐使用$refs来获取，可是有时会出现 this.$refs.xxx 为undefined的情况。 场景1：在created()里使用 在这个生命周期中进行数据观测 ，属性和方法的运算，watch 事件回调。但是页面还没有挂载上去，没有el属性，this.el 属性，this.el属性，this.refs无法调用dom。 解决办法：换成在mounted()里使用 场景2：父元素或当前元素使用了v-if或v-show 因为$refs不是响应式的，只在组件渲染完成后才会生效，
Vue 解决通过this.$refs来获取DOM或者组件报错问题
11-20
1.关于this.$refs的使用场景 如果ref属性加在普通元素上，那么this.$refs.name则指向该DOM元素 <p ref=”p”>hello</p> <!– this.$refs.p 指向该DOM元素 –> 如果ref属性加在组件上，那么this.$refs.name指向该组件实例 <child ref=”child”></child> <!– this.$refs.child 指向该组件 –> 2.为什么有时候通过this.$refs.name来获取会报错？ 一个比较常见的场景：在一个弹窗打开的时候立刻通过this.$refs来
Vue进阶（四十）：ref ($refs) 用法详解
IT全栈 华强工作室
03-15 2742
ref 有三种用法： 1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素 2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。 3、如何利用 v-for 和 ref 获取一组数组或者dom 节点 　　注意： 1、ref 需要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。比如在生命周期 m...
Vue $refs的基本用法
qq_41806475的博客
11-17 2742
html:         &lt;div id="app"&gt;             &lt;div ref = "box"&gt;{{msg}}&lt;/div&gt;             &lt;button @click="change"&gt;点我改变msg的值&lt;/button&gt;         &lt;/div&gt;
vue 数组
07-10 91
今天项目中发现的一个问题： 在vue项目中输出一个数组，明明有俩个值：0,6，但是length为1 正常的是这样的 结果研究发现，是vue源码的问题，具体内容如下： 转载自：http://www.cnblogs.com/Darlietoothpaste/p/6682407.html Vue的数组操作的实现代码大致如下： 1 const aryMethods...
vue在代码中取到div
weixin_51641718的博客
03-15 3712
利用ref，例如 <div ref="aaa"></div> addMarker1() { // 通过该方法可以取到上面的div var sContent = this.$refs.aaa; } 这样做的好处是，比如有个div，你先获得要传入数据的值后再通过这个获得你想获得div，进行展示。 例如百度地图增加点，每个点可以点出信息框，代码如下 var marker = new BMapGL.Marker(new BMapG
vue 父组件通过$refs获取子组件的值和方法详解
10-16
总结来说，Vue 父组件通过 `$refs` 获取子组件的值和方法是一种直接的通信方式，适用于某些场景，如需在父组件中直接调用子组件的方法或获取实时状态。但通常，推荐使用更灵活且易于维护的通信方式，如 props、事件...
Vue中$refs的用法详解
08-27
$refs是Vue中一个非常重要的属性，它允许开发者在模板中添加ref属性，然后在JavaScript中通过vm.$refs来获取该元素或组件。下面我们将详细介绍$refs的用法和应用场景。 一、什么是$refs？ $refs是一个对象，它持有...
vue中$refs, $emit, $on, $once, $off的使用详解
10-16
在Vue.js框架中，$refs, $emit, $on, $once, 和 $off 是用于组件间通信的重要机制。下面将分别对它们进行详细的解释和示例说明。 1. **$refs** `$refs` 是 Vue 提供的一种机制，允许父组件引用其子组件实例。在...
Vue里面ref的用法
qq_43468165的博客
03-13 346
Vue里面ref的用法 ref用在循环里面了 标签里面的写法 <div :ref="'con'+index" class="content" @click="getIndex(index)" v-for="(con,index) in content" :style="con"> {{con}} </div> <div ref="test1"></div> 调用元素写法 //使用循环后调用指定的 var cenx=this.$refs["con"+this.
vue中$refs的使用
江湖行骗老中医
04-20 536
第一种情况:获取dom html代码: js代码: 输出结果: 此时输出的都是dom元素了 第二种情况: 组件之间通信，把div换成一个组件 1 首先写一个box.vue的组件 2 编写test.vue组件 在该组件中使用上面的box.vue组件 html: js: 查看此时的输出结果是: 查看该组件的详...
this.$refs使用方法
最新发布
a_靖的博客
08-21 8348
深入理解和使用this.$refs——Vue.js的利器
Vue单文件组件中多个同名的ref属性，this.$refs的取值及其使用注意事项
热门推荐
fz_leaves的博客
01-04 3万+
Vue官方文档： ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。 1 当同一组件内部，有多个同名ref引用时 this.$refs[ref名称]指向文档流中靠下的组件或DOM节点，若是ref相同的组件或DOM节点间是父子关系，则指向父级组件或DOM节点。 1.1 this.$refs[ref名称]指向文档流中靠下的组件或DOM节点： <template&gt
通过修改Vue源码实现组件中多个ref值相同时通过this.$refs[key]获取到这些组件的数组
wqq99的博客
03-25 4896
获取ref值相同的元素数组
Vue3中如何使用ref获取元素节点全面解析
zyf13671493506的博客
09-28 5456
vue3 ref获取dom的使用
Vue知识点二：$refs的基本用法
HUMM
01-27 3万+
$refs的基本用法 ref 有三种用法 ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素 ref加在子组件上，用this.refs.（ref值）获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.refs.（ref值）获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.refs.（ref值）获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.refs.（ref值）.方法（） 就可以使用了 如何利用v-f
18、ref和$refs的使用
weixin_46841213的博客
04-14 2061
ref和$refs的使用1、ref概念2、在元素中使用ref3、在组件中使用ref 1、ref概念 在JavaScript中需要通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元
Vue初学——ref和$refs的基本使用
wfy17030212的博客
01-07 1371
文章目录一、ref的作用二、使用步骤1.引入库2.读入数据总结 一、ref的作用 通过给一个html元素指定ref这个属性，可以实现对这个元素的DOM控制，就像简单的获取一个页面上h3标签的值。当然，ref的牛逼之处还不止于此，它除了可以控制DOM元素以外，还可以控制组件，用子组件引用父组件的方法，父组件引用子组件的变量等 为一个元素绑定ref的操作如下 <h1 ref="text">Hello World!</h1> 获取那一个元素的DOM console.log(this.
vue $refs获取高度
05-19
假设你有一个 `div` 元素，可以通过以下方式获取其高度： 在模板中添加 `ref` 属性： ```html <div ref="myDiv">这是一个div</div> ``` 在组件中使用 `$refs` 获取元素高度： ```javascript mounted() { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值