vue 获取元素下的所有div_vue获取dom元素高度的方法

获取高度:

要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!!

mounted() {

let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //浏览器高度

let topH = this.$refs.topInfo.offsetHeight;

console.log()

let tabH = this.$refs.tab.offsetHeight;

console.log()

let subH = this.$refs.subBtn.offsetHeight;

console.log()

let scrollHight = this.$refs.scroller.offsetHeight

this.height = (h - topH - tabH - subH) + "px"

//localStorage.setItem("access_token", '52ecda6ecb4a11e7bd2a00163e0891fd') //测试token

this.queryData(0)

let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;//浏览器宽度

} //获取dom元素高度通过在标签里面定义ref属性,用this.$refs.自定义名称.offsetHight;去获取。

还有其他获取指定高度的方式:

//获取元素样式值,为元素ref="ele"(在样式里面写死了的高度)

var heightCss = window.getComputedStyle(this.$refs.ele).height; // ?px

//获取元素内联样式值

var heightStyle =this.$refs.ele.style.height; // ?px

javascript中获取dom元素高度和宽度

javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

vue获取dom元素内容

通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...

vue获取dom元素注意问题

mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.l ...

vue获取DOM元素并设置属性

这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相 ...

Vue 获取DOM元素ref

=====我是li标 ...

Vue 获取dom元素之 ref 和 $refs 详解

一.$refs 一个对象,持有ref注册过的所有元素或子组件.(注册过的 ref 的集合) 二.ref 被用来给元素或子组件注册引用信息.若用在dom元素上,引用指向的就是dom元素:若用在子组件上, ...

Vue获取DOM元素样式 && 样式更改

在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样 ...

随机推荐

ios--进程/多线程/同步任务/异步任务/串行队列/并行队列(对比分析)

现在先说两个基本的概念,啥是进程,啥是线程,啥又是多线程;先把这两个总是给弄清再讲下面的 进程:正在进行的程序,我们就叫它进程. 线程:线程就是进程中的一个独立的执行路径.这句话怎么理解呢! 一个程序 ...

nginx配置文件nginx.conf超详细讲解

#nginx进程,一般设置为和cpu核数一样worker_processes 4;                        #错误日志存放目录 error_log  /data1/logs/er ...

leetcode@ [129] Sum Root to Leaf Numbers (DFS)

https://leetcode.com/problems/sum-root-to-leaf-numbers/ Given a binary tree containing digits from 0 ...

CSS的三种样式:内联式,嵌入式,外部式以及他们的优先级

从CSS 样式代码插入的形式来看基本能够分为下面3种:内联式.嵌入式和外部式三种. 1:内联式css样式表就是把css代码直接写在现有的HTML标签中,如以下代码:

新建web project不自动生成web.xml解决方案

一步一步建立Web Project ,第3步会有 “Generate Web.xml deployment descriptor”,默认没勾选,勾上就行了

js实现Mac触摸板双指事件(上、下、左、右、放大、缩小)

前言 这几天在修复一个web问题时,需要捕获Mac触摸板双指事件(上.下.左.右.放大.缩小),但发现并没有现成的轮子,还是要自己造. 例如:jquery.mousewheel.js(添加跨浏览器的鼠 ...

使用微软自带 SharpZipLib 进行多文件 压缩

/// /// 指定路径打包下载 /// /// &lt ...

Opencv画图操作

1. 画矩形 MyRect rect;rect.left = 5;rect.top = 5;rect.right = 100;rect.bottom = 100;IplImage * pColorIm ...

python 中面向对象的概念

原文 域和作用空间 本地域,函数域(nonlocal)和 全局域(global) def scope_test(): def do_local(): spam = "local spam&q ...

Python之旅:数据类型、字符编码、文件处理

一 引子 1 什么是数据? x=10,10是我们要存储的数据 2 为何数据要分不同的类型 数据是用来表示状态的,不同的状态就应该用不同的类型的数据去表示 3 数据类型 以下每个类型都是有详细介绍链接的 ...

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/564448.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

execl执行linux命令,execl执行Linux命令

相关函数:execle, execlp, execv, execve, execvp1.表头文件:#include 2.函数定义:int execl(const char *path, const char *arg, ...);execl()用来执行参数path字符串所代表的文件路径, 接下来的参数代表执行该文件时传递的argv…

C++函数编译原理和成员函数的实现

C函数的编译 C中的函数在编译时会根据命名空间、类、参数签名等信息进行重新命名,形成新的函数名。这个重命名的过程是通过一个特殊的算法来实现的,称为 名字编码(Name Mangling)。 Name Mangling 是一种可逆的算法,…

linux 运行选择哪个cpu核,判断Linux进程在哪个CPU核运行的方法

问题:有一个Linux进程运行在多核处理器系统上,如何查看该进程运行在哪个CPU上?方法一:ps 命令可以告诉你每个进程/线程目前分配到的(在“PSR”列)CPU ID。ps -o pid,psr,comm -p 运行结果:PID PSR COMM5357 10 prog输…

laravel 任务队列_laravel队列-让守护进程处理耗时任务

待解决的问题最近在做一个服务器集群管理的web项目,需要处理一些极其耗时的操作,比如磁盘格式化分区。对于这个需求,最开始的想法是,为了让节点上的rpc(远程过程调用) service端尽可能简单(简单到只需要popen执行一条指令即可&…

C++对象数组

对象数组是什么 数组对象就是大批量实例化对象的一种方法,例如:Student stu 实例化对象,如果有好几百个对象应该怎么办?这时候就用到了对象数组,顾名思义,就是吧所有要实例化的对象都放到一个组里面&#…

镜像安装linux选择内核版本,在CentOS和Ubuntu中安装Linux Kernel 4.13.10

Linus Torvalds 在 10 月 17 日星期五正式发布了稳定版 Linux Kernel 4.13.10,这个最新版本发布了新功能,进行了诸多修复和问题改进。下面将向大家介绍在 CentOS 和 Ubuntu 中手动安装、更新 Linux Kernel 4.13.10 的方法,当然,这…

C++成员对象和封闭类

有其他类的对象作为 成员对象的类叫封闭类。 任何生成封闭类对象的语句,都要让编译器明白,对象中的成员对象,是如何初始化的。 具体做法是通过封闭类的构造函数的初始化列表。 封闭类对象生成时,先执行所有对象成员的构造函数&a…

linux设备进入睡眠所需时间,android linux 休眠 深度睡眠 查看 方法 调试【转】

在Android移动设备中,有时按下Power键(未接电源,USB)时,因其它apk程序获取了wake_up锁未释放或程序BUG导致未释放,造成未能进入深度睡眠,从而加大了耗电量,减少了待机时间,参考如下图&#xff0…

kali 邮箱攻击_kali下邮件发送工具swaks入坑

Swaks是一个功能强大,灵活,可编写脚本,面向事务的SMTP测试工具,目前Swaks托管在私有svn存储库中。官方项目页面是牛刀小试kali下默认自带,无需安装。01 测试邮箱的连通性swaks --to xxxxxxqq.com返回250ok,…

C++引用浅析

C 中,有一种比指针更加便捷的传递聚合类型数据的方式,那就是引用(Reference)。 在 C/C 中,我们将 char、int、float 等由语言本身支持的类型称为基本类型,将数组、结构体、类(对象)等…

linux 进程 控制终端,linux系统编程之进程(五):终端、作业控制与守护进程

#include#define ERR_EXIT(m)do {perror(m);exit(EXIT_FAILURE);} while(0)int setup_daemon(int, int);/* 守护进程一直在后台运行且无控制终端 */int main(int argc, char *argv[]){// daemon(0, 0)setup_daemon(0, 0);printf("test ..."); // 无输出for(;;) ;ret…

arduino 温度调节器_Arduino用温湿度传感器控制继电器,为什么点了串口助手才能运行,拔掉usb线,直接外界9V电源却用不了...

用温湿度传感器控制继电器,为什么点了串口助手才能运行,拔掉usb线,直接外界9V电源却用不了,以下是程序,目的是在湿度达到40%的时候继电器吸合,45%后,继电器断开,求各位大神指教...用…

C++中指针与引用的区别

指针的本质 指针p也是对象,只不过p存储的数据类型是它所指的对象的地址。可以通过解引用操作符“”来访问对象的值,即p。 对象有常量(const)和非常量之分,如果指针本身是常量,即指针常量,指这…

python支持按指定字符串分割成数组_python – 如何切割numpy数组字符串的每个元素?...

这是一个矢量化的方法 –def slicer_vectorized(a,start,end):b a.view(S1).reshape(len(a),-1)[:,start:end]return np.fromstring(b.tostring(),dtypeSstr(end-start))样品运行 –In [68]: a np.array([hello, how, are, you])In [69]: slicer_vectorized(a,1,3)Out[69]:ar…

数据库的概念

数据存储方式 计算机数据(Data)的存储一般以硬盘为数据存储空间资源,从而保证计算机内的数据能够持续保存。对于数据的处理,一般会采用数据库相关的技术进行处理,从而保证数据处理的高效性。 采用数据库的管理模式不…

高中关于人工智能方面的课题_2019山东人工智能教育专项课题指南选题

人工智能教育专项课题,2019年度山东省教育规划课题已经启动,申报者有这方面的申报意向,就需要知道选题范围,以下是2019山东人工智能教育专项课题指南选题。小学人工智能教育课程体系、教学策略及教学评价的研究初中人工智能教育课…

linux qt5.9交叉编译,QT5.9移植

1.下载Qt源码Qt源码下载地址:Index of /archive/qt 其他源码和其他安装包都是有的。2.解压源码$ mkdir qt5.9$cd qt5.9将下载文件拷贝到当前目录下面。解压$ xz -d qt-everywhere-opensource-src-5.9.7.t…

python雪花算法生成id_理解分布式id生成算法SnowFlake

分布式id生成算法的有很多种,Twitter的SnowFlake就是其中经典的一种。概述SnowFlake算法生成id的结果是一个64bit大小的整数,它的结构如下图:1位,不用。二进制中最高位为1的都是负数,但是我们生成的id一般都使用整数&a…

linux wps 公式编辑器,WPS 2012数学公式编辑器的使用方法(详细图解)

做数学或物理课件时很多公式是件比较头痛的事。时常陷入无穷的拼接法中,用一个一个文本框组合成复杂的公式。其实WPS 2012e为我们提供了一个功能强大的公式编辑器Equation Editor,可以帮助我们解决这些问题。1、插入公式将光标放置于欲插入公式的位置&am…

linux utmp结构体,Linux C编程如何使用联机帮助来解决编程问题?

1.背景多次学习C语言一直无法踏入C语言的大门,每次都是在学习C语言中的那些系统调用库函数等望而却只,linux下的系统调用需要我们去记忆一些没有规律的结构体和一些大写的宏定义并且还有一个函数多种形式的例如print fprintf sprintf等等,看起…