如果你获取到的总是空的,你注意一下:

1、你在哪里调用,和你调用的对象

试试在mounted()里面调用有效果没有

调用的对象是本来就存在的,还是需要数据渲染之后才会出现的,同理,在mounted()里面调用看看

2、调用对象是不是数组列表

我一开始设置ref在v-for列表上,直接获取this.$refs.name.style,永远是空的,

后来才发现,this.$refs.name是一个数组,无法通过 .style 获取样式,

只能遍历这个this.$refs.name数组,在this.$refs.name[index]上设置样式

// 6.14 更新,这个说法有点问题

但是像高度宽度,可以通过offsetHeight,等来获取。

3、调用对象是否和v-if结合使用

ref不是响应式的,所有的动态加载的模板更新它都无法相应的变化。

解决方案:

  通过

setTimeout(() => {

    }, 0)

来得到数据

vue中ref的使用(this.$refs获取为undefined)的更多相关文章

  1. Vue.js-11:第十一章 - Vue 中 ref 的使用

    一.前言 在之前的前端开发中,为了实现我们的需求,通常采用的方案是通过 JS/Jquery 直接操纵页面的 DOM 元素,得益于 Jquery 对于 DOM 元素优异的操作能力,我们可以很轻易的对获取 ...

  2. 【vue】vue中ref用法

    1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...

  3. vue中$ref的基本用法

    1.使用在一般的标签上 <div id="app"> <input ref="count" type="text" v-m ...

  4. 17、前端知识点--Vue中ref的使用

    methods里面的方法,需要手动触发才会执行. 如果想让页面一上来就执行的话,就需要写在mounted这个钩子函数中. <body> <div id="app" ...

  5. vue中如何不通过路由直接获取url中的参数

    前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...

  6. vue中在页面渲染完之后获取元素(否则动态渲染的元素获取不到)

    两种方法: 方法一: 使用$nextTick,在异步获得数据之后再获取元素: 方法二: 在then之后再获取该元素: 问题2:vue中监听改变数组的方法: let idx =; this.listIn ...

  7. Vue中 $ref 的用法

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素)使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取注意:如果获取的是一个子组 ...

  8. vue中ref在input中详解

    当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.v-model <template> <input type="text" v-model=&quo ...

  9. 在vue中的点击事件怎么获取当前点击的元素

    首先 vue的点击事件 是用 @click = “clickfun()” 属性 在html中绑定的,在点击的函数中 添加$event 参数就可以比如<button @click = “click ...

随机推荐

  1. 自动化运维Shell入门

    运维shell 作用 项目部署 项目监控 什么是shell shell是一个程序,/bin/bash/,是一个命令解释器所有linux命令都由他来执行,打开终端就进入了 shell的交互式命令 运行方 ...

  2. python-模块 time, os, sys

    时间模块 和时间有关系的我们就要用到时间模块.在使用模块之前,应该首先导入这个模块. #常用方法 1.time.sleep(secs) (线程)推迟指定的时间运行.单位为秒. 2.time.time( ...

  3. 初探Remoting双向通信(四)

    原 初探Remoting双向通信(四) 2013年06月26日 11:11:32 喜欢特别冷的冬天下着雪 阅读数 2632 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blo ...

  4. 防御 CSRF

    我还针对这个问题请教了 @c4605 , 他对防御 CSRF 提出了两种解决方案: 在每个表单中包含一个 CSRF Token.不将用于认证的 Token 或 Seesion ID 储存在 Cooki ...

  5. android studio安装中出现Failed to install Intel HAXM错误的解决方法

    1.问题分析 从下面可以知道安装Intel HAXM失败,请检查haxm_silent_run.log这篇日志. (1)先了解一下什么是Intel HAXM Intel代表的是英特尔,HAXM的全程是 ...

  6. vue之路由导航守卫-全局前置守卫

    一.使用方式 全局前置守卫用于在路由配置生效之前进行一些动作,可以使用 router.beforeEach 注册一个全局前置守卫: const router = new VueRouter({ ... ...

  7. spring boot 与微服务之间的关系

    Spring Boot 和微服务没关系, Java 微服务治理框架普遍用的是 Spring Cloud. Spring Boot 产生的背景,是开发人员对 Spring 框架越来越复杂的配置吐槽越来越 ...

  8. 用php 生成 excel 表格

    //引用新建对象require "../phpexcel/Classes/PHPExcel.php"; $excel = new PHPExcel(); 建表格 //Excel表格 ...

  9. sql 链接查询

    连接查询是另一种类型的多表查询.连接查询对多个表进行JOIN运算,简单地说,就是先确定一个主表作为结果集,然后,把其他表的行有选择性地“连接”在主表结果集上. 例如,我们想要选出students表的所 ...

  10. 【LeetCode 1】两数之和

    描述 [题解] 用个map的话就是O(N)级别的了. [代码] class Solution { public: unordered_map<int,int> mymap; vector& ...