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
随机推荐
- [Docker] Run a command inside Docker container
For example you are working in a backend project, you have setup Dockerfile: FROM node:10.16.0-stret ...
- JSP大文件分片上传
核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...
- HDU 5734 Acperience ( 数学公式推导、一元二次方程 )
题目链接 题意 : 给出 n 维向量 W.要你构造一个 n 维向量 B = ( b1.b2.b3 ..... ) ( bi ∈ { +1, -1 } ) .然后求出对于一个常数 α > 0 使得 ...
- NSObject和反射2
NSObject和反射2. commend +R run id stu=[Student student]; // –> Student *stu=[Student student]; : ...
- 去除ZERO WIDTH SPACE 零宽字符: 看不见却占位置的字符
ZERO WIDTH SPACE 由于历史原因,编码方案中保留着该类编码 解决方案 1. 替换 ```js str.replace(/[\u200B-\u200D\uFEFF]/g, ''); ``` ...
- 【redis 学习系列】API的理解与使用(四)
5.集合 集合(set)类型也是用来保存多个字符串元素,但是与列表不一样的是,集合中不允许有重复的元素,并且集合中的元素是无序的,不能通过索引下标获取元素. 如图2-22所示,集合user:1:fol ...
- Leetcode题目141.环形链表(简单)
题目描述: 给定一个链表,判断链表中是否有环. 为了表示给定链表中的环,我们使用整数 pos 来表示链表尾连接到链表中的位置(索引从 0 开始). 如果 pos 是 -1,则在该链表中没有环. 示例 ...
- 自定义 TreeView 第三种状态(C#自定义控件)
本文核心部分采用 http://blog.csdn.net/am2004/article/details/1621349 此网站代码. 在增加了部份事件的同时,将点击图片更改节点选中状态 这一小地方作 ...
- Golang 空指针nil的方法和数据成员
golang中,有一个特殊的指针值nil. 如何使用nil没有方法和成员变量呢? 下面来看下具体例子. 程序中,定义结构体类型Plane, 将Plane类型的指针作为函数的参数,然后传入nil作为实参 ...
- unix进程通信方式总结(上)(转)
本文将<unix环境高级编程>一书中所涉及的几种重要的进程间通信方式(Inter-Process Communication)进行简单总结,总的来说,进程间通信有以下几种: ...