vue 之动态计算ul宽度，根据li个数动态获取 ul 宽度

最新推荐文章于 2024-07-29 16:54:02 发布

幽幽靖

最新推荐文章于 2024-07-29 16:54:02 发布

阅读量4.3k

点赞数 1

分类专栏： VUE css

本文链接：https://blog.csdn.net/ws19900201/article/details/102228474

版权

本文介绍了如何在Vue中动态计算ul元素的宽度，依据li元素的数量来自动调整ul的宽度。通过html结构和JavaScript实现，特别是在数据变化时，利用ul的ref和children属性来获取li的相关信息，从而实现宽度的动态计算。

摘要由CSDN通过智能技术生成

1、html

<ul ref="ul" :style="{
       width: widthnum }">
	<li ref="ulli"></li>
</ul>

2、JavaScript

// 获取高度值 （内容高+padding+边框）
let height= this.$refs.ulli.offsetHeight; 
 
// 获取元素样式值 （存在单位）
let height = window.getComputedStyle(this.$refs.ulli).height;
 
//获取元素内联样式值（非内联样式无法获取）
let height = this.$refs.ulli.style.height;
 
 
// 注意：要在元素渲染出来才能获取元素的高度