vue $refs获取dom元素
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元素的更多相关文章
- vue获取dom元素内容
通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...
- Vue自定义指令获取DOM元素
我们知道,Vue.js的核心是数据驱动,当数据有所变化时,DOM就会被更新,比如: <span v-text="msg"></span> export de ...
- vue(4)—— vue的过滤器,监听属性,生命周期函数,获取DOM元素
过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...
- Vue系列之 => ref获取DOM元素和组件
可以获取DOM元素,和组件中的数据,方法 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- vue获取dom元素注意问题
mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.l ...
- vue 使用ref获取DOM元素和组件引用
在vue中可以通过ref获取dom元素,并操作它,还可以获取组件里面的数据和方法. HTML部分: <div id="app"> <input type=&quo ...
- vue获取dom元素高度的方法
获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...
- vue 组件传递值以及获取DOM元素的位置信息
1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...
- 20.Vue中获取DOM元素和组件
1.获取DOM元素和组件:this.$refs
随机推荐
- BZOJ 2013 : [Ceoi2010]A huge tower / Luogu SP6950 CTOI10D3 - A HUGE TOWER
传送门 菜鸡.jpg CODE #include <bits/stdc++.h> using namespace std; const int MAXN = 620005; int n, ...
- windows——celery
celery 4.0版本以后放弃对Windows的支持 GITHUB_issues(https://github.com/celery/celery/issues/4178) 替代解决方案: 安装:p ...
- python--批量修改文件夹名
python代码如下: import os , re import os.path rootdir = r'C:\Users\Administrator\Desktop\222' # rootdir ...
- Educational Codeforces Round 33 (Rated for Div. 2) A题
A. Chess For Three Alex, Bob and Carl will soon participate in a team chess tournament. Since they a ...
- plupload+上传文件夹
文件夹数据库处理逻辑 publicclass DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject(); ...
- (十七)线程,connect的第五个参数
采用多线程,将需要处理的后台数据放入子线程,为了能够跨线程调用,一种方法是使用类似线程锁对线程进行保护,另外一种方法使用Qt的信号槽机制.Qt的信号槽机制采用connect函数进行连接,connect ...
- 51 Nod 1287 加农炮(单调队列思想+二分)
1287 加农炮 题目来源: Codility 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 收藏 关注 一个长度为M的正整数数组A,表示从左向右的地形高度 ...
- 【CUDA 基础】5.4 合并的全局内存访问
title: [CUDA 基础]5.4 合并的全局内存访问 categories: - CUDA - Freshman tags: - 合并 - 转置 toc: true date: 2018-06- ...
- 数据结构实验之链表六:有序链表的建立(SDUT 2121)
#include <bits/stdc++.h> using namespace std; struct node { int data; struct node *next; }; in ...
- Django-自定义web框架
自定义web框架 1.准备登录的html <!DOCTYPE html> <html lang="en"> <head> <meta ch ...