vue.js动态设置VueComponent高度遇到的问题
1.获取HTML元素高度
<div v-for="data in list"><div ref="abc">{{data.id}}</div>
</div>
mounted(){console.log(this.$refs.abc[0].clientHeight);//获取第一个div元素的高度this.$refs.abc[0].style.height = 100 +'px';//动态设置HTML元素高度
}
注意:1.此处用到v-for循环,this.$refs.abc返回的是个HTMLElement数组2.this.$refs在DOM元素挂载完成后才可以调用3.不可以通过this.$refs.abc[0].clientHeight = 100 +'px'设置高度,因为clientHeight属性是只读的,不允许修改。4.注意加'px'单位
2.获取VueComponent标签生成的元素的高度
<Row v-for="(data,idx) in list" :key="idx"><Col ref="leftCol"><p>{{data.id}}</p></Col><Col ref="rightCol"><p>{{data.id}}</p></Col>
</Row>
mounted(){for(let i = 0; i < this.list.length; i++){console.log(this.$refs.leftCol[i].$el.clientHeight);//获取左边列元素的高度console.log(this.$refs.rightCol[i].$el.clientHeight);//获取右边列元素的高度this.$refs.leftCol[0].$el.style.height = 100 +'px';//动态设置VueComponent元素高度 };
}
注意:this.$refs.leftCol返回的是个VueComponent数组,this.$refs.leftCol[i]返回的是个VueComponent元素,
而不是HTMLElement
2.判断一个对象是jQuery对象还是DOM对象
var jqueryObject = $("#a");
jqueryObject instanceof jQuery; //jqueryObject 是jQuery对象var domObject = document.querySelector("#a");
domObject instanceof jQuery; //domObject不是jQuery对象
domObject instanceof HTMLElement; //domObject是DOM对象
vue.js动态设置VueComponent高度遇到的问题相关推荐
- JS 动态设置页面高度
JavaScript获取页面.屏幕尺寸大小参数 //网页可见区域宽 document.body.clientWidth //网页可见区域高 document.body.clientHeight //网 ...
- vue 动态设置组件高度_高度动态的Vue明星评分组件
vue 动态设置组件高度 虚拟动态星级 (vue-dynamic-star-rating) A Highly Customizable, easy-to-use elegant stars ratin ...
- vue.js动态计时器_基于Vue.js的Pomodoro技术计时器
vue.js动态计时器 番茄 (pomodoro) Timer for Pomodoro Technique built on Vue.js 2.0 with PWA 基于PWA的Vue.js 2.0 ...
- html设置根rem,经过js动态设置根元素的rem方案
rem目前是响应式开发移动端一个很重要也是经常使用的一个元素,可是在网上看的各类文章都会超级懵逼.因此我在下面给出两个方案,也列举出使用方法,让你们一目了然.前提是设计稿以750为准.其中测试的设计稿 ...
- js动态设置元素的宽高
js动态设置元素的宽高 实现代码: var html = document.getElementsByTagName('html')[0];var dl_second_nav=document.get ...
- js动态设置文字大小
js动态设置文字大小 <script>function setRem() {var ui_w = 375;// 获取屏幕的宽度var clientWidth = document.docu ...
- android 设置 linearlayout 高度,在RelativeLayout中动态设置LinearLayout高度/宽度
我在RelativeLayout中有一个linearLayout.我需要能够根据屏幕尺寸动态设置线性布局的高度.我有一些困难. 我怎么能做到这一点?在RelativeLayout中动态设置Linear ...
- vue中动态设置背景渐变色
vue中动态设置背景渐变色 1.效果展示 2.核心(动态更换单一的背景颜色也可以使用) <div class="ss" v-bind:style="{ backgr ...
- vue 响应式ui_如何在Vue.js中设置响应式UI搜索
vue 响应式ui Are you thinking of building something awesome with one of the popular modern frameworks o ...
最新文章
- JAVA实现矩形覆盖问题(《剑指offer》)
- javascript创建类方法汇总(包含es6语法)
- VisualStudio2017下载与安装教程详解
- linux服务器配置https访问
- ios 获取html的高度,iOS Webview自适应实际内容高度的4种方法详解
- python3 robotframework+pycharm框架搭建
- 适用于树莓派Raspberry Pi的嵌入式QT平台(二) -- 在Windows下用Qt Creator开发编译Raspberry Qt 5应用程序...
- 分页总页数计算方法 所有分页通用
- 单词字符的one-hot编码
- 将输入中的制表符替换成适当数目的空格,使空格充满到下一个制表符终止位的地方...
- Process Simulate
- 强化学习Q-learning简单理解
- nodejs解压文件
- IT人才薪水“虚高” ,寡头垄断下小企业工程师告急[转]
- 三键蓝牙音箱方案-DLT8M04S-杰力科创
- SNN论文系列-ANN to SNN 学习算法
- 全国城市数据获取 mysql全国城市数据
- 某悦的WinRT学习记录1
- 开源项目精选推荐-杨小杰工具箱(YoungxjTools)
- cad序列号2016申请号_安装 CAD 踩坑
热门文章
- c语言 计算在10个学生的平均成绩,C语言:编写程序,输入10个学生的成绩数据,计算并输出平均分及低于平均分的学生的人数。...
- USB转RS422带隔离电路设计(CAIS3082W替代方案)
- 深度解析UWB定位技术——隧道人员定位系统
- 多线程下载神器IDM,永久使用
- 专升本计算机和数学怎么备考,数学与应用数学专接本怎么复习
- java高级过滤器、baseServlet、log4j配置使用poi实现excel导入数据库
- 【开源WebGIS】07-Openlayers+Vue 测量功能-02
- umijs介绍及基本用法、配置式路由、约定式路由、路由传参等
- 【AUTOSAR】【以太网】 EthIf
- PD等多协议快充诱骗触发器SINK(“Power Z 弟弟 Power Low”)DIY