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
随机推荐
- [Luogu] 国王游戏
https://www.luogu.org/problemnew/show/P1080 按照 a * b 排序 高精度 #include <bits/stdc++.h> using nam ...
- 【线性代数】2-5:逆(Inverse)
title: [线性代数]2-5:逆(Inverse) toc: true categories: Mathematic Linear Algebra date: 2017-09-11 20:00:1 ...
- [Vue] : Vue概述
什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架. Vue.js 是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端三大主流框 ...
- 初步学习HashTable(哈希表或者散列链表)
初次接触哈希表,我谈谈自己对哈希表的一些理解,可能有误,还望指正. 对于哈希表,存放的数据是键值对<key,value>.是按照键值来索引的,键key可以是字符串.单个字符.整形数等,值v ...
- 利用状态机(FSM)进行简单的uart串口发送数据
module uart_tx(clk,rst_n,key,txd); input clk; input rst_n; input key; output reg txd; :] state; :] b ...
- Django基础之cookie
1. Cookie 1.1 Cookie的由来 大家都知道HTTP协议是无状态的.无状态的意思是每次请求都是独立的,它的执行情况和结果与前面的请求和之后的请求都无直接关系, 它不会受前面的请求响应情况 ...
- Python中send和sendall的区别
官方文档对socket模式下的socket.send() 和 socket.sendall()解释如下: sock.sendall(string[, flags]) Send data to the ...
- python sqlite3查询表记录
1.查询数据库log_info表最后10条记录. desc - 指"降序" 解决的方法是:按照ID 逆序排列,选取前10个 select * from 'log_info' ord ...
- Java HotSpot(TM) 64-Bit Server VM warning: INFO: os::commit_memory(0x0000000794500000, 576716800, 0)
linux基于tomcat部署的web应用程序报 Java HotSpot(TM) 64-Bit Server VM warning: INFO: os::commit_memory(0x000000 ...
- markdown简单的使用方法
转自 https://www.cnblogs.com/math/p/se-tools-001.html 作者:正交分解 1.如何切换编辑器 切换博客园编辑器为MarkDown:MarkDown Edi ...