1.今天做vue项目有个获取dom节点,主要目的是获取节点让滚动到顶部

首先在滑动容器去添加ref

 <div class="contentScroll" ref="scrollRef"></div>

然后根据我的需求是:切换tab然后让对应tab下的内容滚动到顶部

 this.$refs.scrollRef[0].scrollTop = 0;

以上就能实现需求。

如果想监听滚动容器的scrollTop也可以打印出来看看

1.首先在mouted里面去监听对应的滑动容器

 this.box = this.$refs.scrollRef[0];
this.box.addEventListener('scroll',this.scrollToTop);

2.在methods里面去写对应的操作

 scrollToTop(){
var scrollTop = this.$refs.scrollRef[0].scrollTop;
console.log(scrollTop)
},

over...关于节点方面的,以后继续更到这里。

vue $refs获取dom元素的更多相关文章

  1. vue获取dom元素内容

    通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...

  2. Vue自定义指令获取DOM元素

    我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export de ...

  3. vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

  4. Vue系列之 => ref获取DOM元素和组件

    可以获取DOM元素,和组件中的数据,方法 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  5. vue获取dom元素注意问题

    mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.l ...

  6. vue 使用ref获取DOM元素和组件引用

    在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type=&quo ...

  7. vue获取dom元素高度的方法

    获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...

  8. vue 组件传递值以及获取DOM元素的位置信息

    1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...

  9. 20.Vue中获取DOM元素和组件

    1.获取DOM元素和组件:this.$refs

随机推荐

  1. 转化对象为map方法

    言语不多,直接上代码. private Map<String, Object> introspect(Object obj) throws Exception { Map<Strin ...

  2. NodeList类数组对象: HTMLCollection , NamedNodeMap,两套API(childNodes , children)

    快捷键:leishuzuduixiang(类数组对象)  bianlijiedian(遍历节点)  jiedian(节点)  htmlcollection , namednodemap , nodel ...

  3. SpringMVC拦截静态资源的解决方法

    本文中的各软件版本简要信息: IDE:Myeclise17 JDK:1.8.0_111 spring:5.1.8 springMVC:5.1.8 mybatis:3.2.2 Tomcat:9.0 在使 ...

  4. useradd/usermod/userdel/passwd/groupadd/groupmod/groupdel/gpasswd

    用户 用户系统也是通过一个文件来管理的,默认的root用户id是0, shadow文件说明 加密算法类别 $后面的数字6指定了加密算法使用的是第六种,sha512加密 增加用户,修改成同样的密码,查看 ...

  5. jQuery系列(十四):jQuery中的ajax

    1.什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下,AJAX通过后台加载数据,并在 ...

  6. 《30天自制操作系统》学习笔记--Mac下工具的使用

    现在来介绍官网上下的工具怎么用首先是官网地址,书上有个注释上有:hrb.osask.jp 翻译成中文大概是这个样子滴. 上面有两个文件可以下载,一个是工具,一个是工具的源代码,很好的学习资料 下面把工 ...

  7. Centos 7 搭建蓝鲸V4.1.16稳定社区版

    在本地用VMware模拟了三台主机 准备至少3台 CentOS 7 以上操作系统的机器,保证三台虚拟机都可以上网 最低配置:2核4G(我用的是这个) 建议配置: 4核12G 以上 192.168.16 ...

  8. Python中send和sendall的区别

    官方文档对socket模式下的socket.send() 和 socket.sendall()解释如下: sock.sendall(string[, flags]) Send data to the ...

  9. 关于AngularJS与其他前端框架混合使用的思考

    AngularJS 是一个为动态WEB应用设计的结构框架,拥有双向数据绑定,模板,MVVM,依赖注入,指令5大优点,Angular最有诱惑力的就是数据绑定功能,使用MVC模式进行开发,Angular在 ...

  10. Leetcode题目79.单词搜索(回溯+DFS-中等)

    题目描述: 给定一个二维网格和一个单词,找出该单词是否存在于网格中. 单词必须按照字母顺序,通过相邻的单元格内的字母构成,其中“相邻”单元格是那些水平相邻或垂直相邻的单元格.同一个单元格内的字母不允许 ...