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. 防止sql注入的参数化查询

    参数化查询为什么能够防止SQL注入 http://netsecurity.51cto.com/art/201301/377209.htm OleDbDataAdapter Class http://m ...

  2. HZWER

    我们的征途是星辰大海 2016年3月13日8,8077 尊敬的各位老师.亲爱的同学们: 大家好,我是高三(1)班的黄哲威.今天很荣幸能和大家分享一些有关竞赛的心得体会. 去年7月15日,第32届全国信 ...

  3. shell 读取文本并访问mysql/redis

    #!/bin/bash File="redeemcode.csv" #File=$ database="d_redeem_info" echo "ch ...

  4. Navicat Premium 12破解版激活(全新注册机)

    使用打包下载就可以了 打包下载:(注册机有5.0和5.1用哪个看心情,我用的5.1) 连接:https://pan.baidu.com/s/1ARjFa2vEYxe9sljbrZR8fQ 提取码:lx ...

  5. Liunx反弹shell的几种方式

    什么是反弹shell? 简单理解,通常是我们主动发起请求,去访问服务器(某个IP的某个端口),比如我们常访问的web服务器:http(https)://ip:80,这是因为在服务器上面开启了80端口的 ...

  6. [CSP-S模拟测试]:B(期望DP)

    题目传送门(内部题151) 输入格式 第一行一个整数$N$. 第二行$N$个整数,第$i$个为$a_i$. 输出格式 一行一个整数,表示答案.为避免精度误差,答案对$323232323$取模. 即设答 ...

  7. 栈(Java实现)

    栈是最基本的数据结构之一,其特点是先进后出. 1.基于数组的可动态调节大小的栈 public class ResizingArrayStack<Item> { private Item[] ...

  8. Alpha冲刺(6/6)

    队名:new game 组长博客:戳 作业博客:戳 组员情况 鲍子涵(队长) 燃尽图 过去两天完成了哪些任务 协调了一下组内的工作 复习了一下SuffixAutomata 接下来的计划 实现更多的功能 ...

  9. ansible的错误

    错误 [root@bogon ansible]# ansible test -m ping 192.168.16.155 | FAILED! => { "msg": &quo ...

  10. JDK8记FullGC时候Metaspace内存不会被垃圾回收

    本文链接:https://blog.csdn.net/a15939557197/article/details/90635460背景前段时间有一个这样的需求:第三方调用接口,30分钟内调用120W次: ...