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. BZOJ 4009: [HNOI2015]接水果 (整体二分+扫描线 树状数组)

    整体二分+扫描线 树状数组 具体做法看这里a CODE #include <cctype> #include <cstdio> #include <cstring> ...

  2. Codeforces Round #454 Div. 1 [ 906A A. Shockers ] [ 906B B. Seating of Students ] [ 906C C. Party ]

    PROBLEM A. Shockers 题 http://codeforces.com/contest/906/problem/A 906A 907C 解 水题,按照题意模拟一下就行了 如果是 ‘ ! ...

  3. Finding Lane Lines on the Road

    Finding Lane Lines on the Road The goals / steps of this project are the following: Make a pipeline ...

  4. Easy-RSA 3 Quickstart README

    Easy-RSA 3 Quickstart README This is a quickstart guide to using Easy-RSA version 3. Detailed help o ...

  5. diff:二进制文件内容差异比较

    在Ubuntu 18.04下验证,造冰箱的大熊猫@cnblogs 2019/7/29 假设我们需要以二进制格式比较两个文件file1.bin和file2.bin的差异,一个简单的方法是 1)先使用xx ...

  6. Codevs 1298 凸包周长

    1298 凸包周长 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description 给出平面上n个点,求出这n个点形成的凸包的周长. 凸包的定 ...

  7. Linux .bashrc

    Set environmental variable // 用:隔开 export PATH=$PATH:<PATH >:<PATH >:<PATH >:----- ...

  8. 处理flutter http请求添加application/json报错Cannot set the body fields of a Request with content-type “application/json”

    在flutter中在http请求发送时设置"content-type": "application/json"会出现报错Cannot set the body ...

  9. R语言:怎么进行异常检测

    a <- try(as.Date('2017-02-30'),silent = T) 当silent为F是,错误消息还是会返回 怎么检测a是否出错呢:if('try-error' %in% cl ...

  10. CentOS 7服务器下Nginx安装配置

    一.安装编译工具及库文件 $ yum -y install make zlib zlib-devel gcc gcc-c++ libtool openssl openssl-devel pcre pc ...