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
随机推荐
- 09 深科技相关表结构 (未完成)、git
1.深科技相关 1. 深科技表结构(6表) 深科技4张+2张用户表 - 深科技 用户表 用户Token 文章来源 文章表 通用评论表 通用收藏表 # ######################## ...
- 11 SaltApi
1.APIS https://docs.saltstack.com/en/latest/topics/api.html 1.python client api 必须运行在master节点上 2. 一般 ...
- 【SaltStack官方版】—— returners——返回器
ETURNERS 返回器 By default the return values of the commands sent to the Salt minions are returned to t ...
- Verilog写入变量值到文件语句
integer signed fid_out1,fid_out2; initial begin fid_out1 = $fopen("dataout_i.txt","w& ...
- Luogu P5022 旅行 搜索+贪心
好吧...一直咕..现在才过...被卡常卡到爆... 写的垃圾版本,$n^2$无脑删边..可以发现走出来的是棵树...更优秀的及数据加强版先咕着...一定写.qwq #include<cstdi ...
- (十八)链接数据库,QSqlTableModel
QMYSQL——mysql QSQLITE——sqlite QOICQ——orcale 所需头文件 .pro增加 sql #include <QSqlDatabase> #include ...
- 小米oj 帮小学生排队(排序+插入)
帮小学生排队 序号:#18难度:有挑战时间限制:1000ms内存限制:10M 描述 用一个数组表示一群正在排队的小学生,每个小学生用一对整数 H, K 来表示:H 表示这个小学生的身高,K 表示这个 ...
- Java中jdk代理和cglib代理
代理模式 给某一个对象提供一个代理,并由代理对象控制对原对象的引用.在一些情况下,一个客户不想或者不能够直接引用一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用. 在Java中代理模式从实 ...
- Robot Framework(七)创建用户关键字
2.6创建用户关键字 关键字表用于通过将现有关键字组合在一起来创建新的更高级别关键字.这些关键字称为用户关键字,以区别于 测试库中实现的最低级库关键字.创建用户关键字的语法与创建测试用例的语法非常接近 ...
- Java图片裁剪
public static void main(String[] args) throws IOException { String path = "C:/Users/yang/Deskto ...