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. spring注解@Import和@ImportResource

    @Import只负责引入javaCOnfig形式定义的Ioc容器配置,等同于<import resource="xxx.xml"/>将一个配置文件导入另一个 @Conf ...

  2. CSS实现太极效果

    这个伪元素的位置对齐还妹搞明白 需要再研究研究   <html> <head> <title>taiji</title> <style> b ...

  3. BOOTING ELOQUENT MODEL TRAITS

    BOOTING ELOQUENT MODEL TRAITS So I've learnt a little Laravel/Eloquent trick today that is very much ...

  4. 【CUDA 基础】5.4 合并的全局内存访问

    title: [CUDA 基础]5.4 合并的全局内存访问 categories: - CUDA - Freshman tags: - 合并 - 转置 toc: true date: 2018-06- ...

  5. Django-事务和锁

    一.事务 1.全局开启事务 在Web应用中,常用的事务处理方式是将每个请求都包裹在一个事务中.这个功能使用起来非常简单,你只需要将它的配置项ATOMIC_REQUESTS设置为True. 它是这样工作 ...

  6. 创建express项目(nodejs)

    1.下载nodejs安装包 nodejs官网下载最新版本就行,网址:http://nodejs.cn/download/,点击自己适用的系统,自动下载跟电脑操作系统位数符合的安装包, 2.配置环境 最 ...

  7. Sublime Text 使用笔记(大全呀,菜鸟必看)

    下载和安装 Sublime Text2是一款开源的软件,不需要注册即可使用(虽然没有注册会有弹窗,但是基本不影响使用). 下载地址:http://www.sublimetext.com ,请自行根据系 ...

  8. python并发——信号量

    信号量通常用于保护数量有限的资源,例如数据库服务器.在资源数量固定的任何情况下,都应该使用有界信号量.在生成任何工作线程前,应该在主线程中初始化信号量. 工作线程生成后,当需要连接服务器时,这些线程将 ...

  9. QString介绍

    QString stores a string of 16-bit QChars, where each QChar corresponds one Unicode 4.0 character. 一. ...

  10. sql 查询存在一个表而不在另一个表中的数据

    方法一(效率底) select A.* from 办卡 A where A.namedh not in (select namedh from 银行) 方法二(效率中) select A.* from ...