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. Luogu P5048 [Ynoi2019模拟赛]Yuno loves sqrt technology III 分块

    这才是真正的$N\sqrt{N}$吧$qwq$ 记录每个数$vl$出现的位置$s[vl]$,和每个数$a[i]=vl$是第几个$vl$,记为$P[i]$,然后预处理出块$[i,j]$区间的答案$f[i ...

  2. 校验正确获取对象或者数组的属性方法(babel-plugin-idx/_.get)

    背景: 开发中经常遇到取值属性的时候,需要校验数值的有效性. 例如: 获取props对象里面的friends属性 props.user && props.user.friends &a ...

  3. git branch/meger step(3)

    # update last repositories git pull git log # create yourself repositories base on last repositories ...

  4. break语句与continue语句

    break:终止该层循环: continue:跳过该层循环 注: ①:若这两个语句离开应用范围,存在是没有意义的. ②:这个两个语句后面都不能有语句,因为执行不到. ③:continue语句是跳过本次 ...

  5. LeetCode 复原IP地址(探索字节跳动)

    题目描述 给定一个只包含数字的字符串,复原它并返回所有可能的 IP 地址格式. 示例: 输入: "25525511135" 输出: ["255.255.11.135&qu ...

  6. python编码,三个编码实例

    1.字符串编码设置 data = u'你好' utf8 = data.encode('utf-8') 2.管道编码设置 import locale import sys ###设置输出管道编码### ...

  7. python 牛顿迭代法

    使用牛顿迭代法求方程  在x附近的一个实根. 赋值X,即迭代初值:用初值x代入方程中计算此时的f(x)=(a * x * x * x + b * x * x + c * x + d)和f’(x)=(3 ...

  8. linux内核中有哪些子系统(框架)呢?

    注意: 分析用的linux内核版本为5.1.3 1. RTC子系统 2. Remote Processor子系统 3. Remote Processor Message子系统 4. SCSI子系统 5 ...

  9. shift and add算法相关

    1.超分辨率 非均匀插值 Farsiu S, Robinson D, Milanfar P. Robust shift and add approach to superresolution[J]. ...

  10. 手把手教你用蒲公英获取udid

    如果需要获取udid,但是拥有手机的测试用户身边没有mac电脑和xcode环境, 今天就分享一个快捷的在线获得udid的方法 利用蒲公英网站的获取udid功能 手机浏览器访问 http://www.p ...