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

首先在滑动容器去添加ref

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

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

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

以上就能实现需求。

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

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

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

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

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

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. Appium Inspector

    点击放大镜,打开如下页面: 需要填写的信息如下: 获取以上信息,需执行aapt命令,查看app信息: 进入appt.exe所在路径,执行如下命令: 得到app的详细信息: 填写完如下信息后,保存: i ...

  2. CF732D Exams 二分 贪心

    思路:二分+贪心 提交次数:10次以上 错因:刚开始以为二分(边界,$+1or-1$)写错了,调了半天,后来才发现是$ck()$写错了.开始只判了最后是否小于零,而应该中间一旦小于零就$return\ ...

  3. BOOTING ELOQUENT MODEL TRAITS

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

  4. 【线性代数】1-0:向量(Vector)

    title: [线性代数]1-0:向量(Vector) toc: true categories: Mathematic Linear Algebra date: 2017-08-28 10:01:2 ...

  5. 为orangepi zero编译安装nginx记录

    使用的系统是armbian 1.下载nginx源代码 wget http://nginx.org/download/nginx-1.17.0.tar.gz 2.解压nginx源代码 tar xvzf ...

  6. 日期与时间(C/C++)

    C++继承了C语言用于日期和时间操作的结构和函数,使用之前程序要引用<ctime>头文件 有四个与时间相关的类型:clock_t.time_t.size_t.和tm.类型clock_t.s ...

  7. 五一培训 清北学堂 DAY4

    今天上午是钟皓曦老师的讲授,下午是吴耀轩老师出的题给我们NOIP模拟考了一下下(悲催暴零) 今天的内容——数论 话说我们可能真的是交了冤枉钱了,和上次清明培训的时候的课件及内容一样(哭. 整除性 质数 ...

  8. dcokee 安装 nginx

    1,docker pull openresty/openresty 2, mkdir  /opt/local/openresty  等等文件夹 3, docker run  --name=" ...

  9. 什么是跨平台性?原理是什么?JVM

    所谓跨平台性,是指java语言编写的程序,一次编译后,可以在多个系统平台上运行. 实现原理:Java程序是通过java虚拟机在系统平台上运行的,只要该系统可以安装相应的java虚拟机,该系统就可以运行 ...

  10. jQuery常用Event-API

    目的:对web页面(HTML/JSP)进行事件触发,完成特殊效果的处理 window.onload:在浏览器加载web页面时触发,可以写多次onload事件,但后者覆盖前者 ready:在浏览器加载w ...