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
随机推荐
- map(callback)将一组元素转换成其他数组(不论是否是元素数组)
map(callback) 概述 将一组元素转换成其他数组(不论是否是元素数组) 你可以用这个函数来建立一个列表,不论是值.属性还是CSS样式,或者其他特别形式.这都可以用'$.map()'来方便的建 ...
- c/c++读取一行可以包含空格的字符串(getline,fgets用法)
1.char[]型 char buf[1000005]; cin.getline(buf,sizeof(buf)); 多行文件输入的情况: while(cin.getline(buf,sizeof(b ...
- shell中命令代换$()与`` 、 变量代换${} 、 整数运算$(( )) 的区别
命令代换$()与`` . 变量代换${} . 整数运算$(( )) 1.$( ) 与 ` ` (反引号) 在 bash shell 中,$( ) 与 ` ` (反引号) 都是用来做命令替换用(comm ...
- shell 读取文本并访问mysql/redis
#!/bin/bash File="redeemcode.csv" #File=$ database="d_redeem_info" echo "ch ...
- AGC033D Complexity
题意 给出一个\(n*m\)的\(0,1\)矩阵,若一个矩阵中的所有元素都相同,则这个矩阵的代价为\(0\),如果不是则选择一种将它分成两个子矩阵的方案,代价为所有方案中(两个子矩阵的代价的较大值+\ ...
- python中with语句的使用
引言 with 语句是从 Python 2.5 开始引入的一种与异常处理相关的功能(2.5 版本中要通过 from __future__ import with_statement 导入后才可以使用) ...
- 【分类模型评判指标 二】ROC曲线与AUC面积
转自:https://blog.csdn.net/Orange_Spotty_Cat/article/details/80499031 略有改动,仅供个人学习使用 简介 ROC曲线与AUC面积均是用来 ...
- 【零基础】搞懂GPU为什么比CPU“快”
一.前言 近几年深度学习在各领域大显神威,而”GPU加速"也得到了越来越多的篇幅,似乎任何程序只要放到GPU上运行那速度就是杠杠的.GPU代替CPU计算已成了大势所趋?我先告诉你结论”那是不 ...
- Linux设备驱动程序 之 read和write
read和write原型 read和write方法完成的任务是相似的,亦即,拷贝数据到应用程序空间,或者反过来从应用程序空间拷贝数据:因此,它们的原型很相似,如下: ssize_t (*read) ( ...
- 【转】Qt编写串口通信程序全程图文讲解
本文章原创于www.yafeilinux.com 转载请注明出处. (说明:我们的编程环境是windows xp下,在Qt Creator中进行,如果在Linux下或直接用源码编写,程序稍有不同,请自 ...