这篇“vue.js动态设置VueComponent高度遇到问题如何解决”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue.js动态设置VueComponent高度遇到问题如何解决”文章吧。
计算
安全
数据库
网络和加速
企业服务
<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'单位
<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
var jqueryObject = $("#a");
jqueryObject instanceof jQuery; //jqueryObject 是jQuery对象
var domObject = document.querySelector("#a");
domObject instanceof jQuery; //domObject不是jQuery对象
domObject instanceof HTMLElement; //domObject是DOM对象<template>
<el-row>
<el-col :span="24">
<el-row ref="headerMenu" class="header-menu">
<el-col :span="24">
<el-menu router mode="horizontal">
<el-menu-item index="1" route="/global-overview">全局概览</el-menu-item>
<el-menu-item index="2" route="/e-commerce-business">电商业务</el-menu-item>
<el-menu-item index="3" route="/douniao-business">抖鸟业务</el-menu-item>
<el-menu-item index="4" route="/administrative-business">行政业务</el-menu-item>
<el-menu-item index="5" route="/admin">管理员入口</el-menu-item>
</el-menu>
</el-col>
</el-row>
<el-row ref="routerView">
<router-view></router-view>
</el-row>
</el-col>
</el-row>
</template><script>
export default {
name: "home-page",
mounted() {
/**
* when the component is hung, dynamically obtain the height of the header menu,
* and set this value to router view as margin top
*/
this.$refs.routerView.$el["style"].marginTop = `${this.$refs.headerMenu.$el["offsetHeight"]}px`;
}
}
</script><style scoped>
.header-menu {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
</style>以上就是关于“vue.js动态设置VueComponent高度遇到问题如何解决”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
