Vue中的dom height指的是當(dāng)前元素的高度，包括padding、border和content的高度。在進(jìn)行頁面布局或動(dòng)態(tài)效果時(shí)，我們常常需要獲取和設(shè)置元素的高度。Vue提供了一些方法來操作dom height。

獲取dom height

// ref方式
<div ref="domHeight"></div>
// js方式
const dom = document.querySelector('#domHeight')
const height = dom.offsetHeight
const marginTop = parseInt(getComputedStyle(dom).marginTop) 
const marginBottom = parseInt(getComputedStyle(dom).marginBottom) 
console.log(height + marginTop + marginBottom)

設(shè)置dom height

// ref方式
<div ref="domHeight"></div>
// js方式
mounted() {
const dom = this.$refs.domHeight
dom.style.height = '100px'
dom.style.padding = '10px'
dom.style.border = '1px solid #ccc'
}

總結(jié)

Vue中操作dom height的方法比較簡(jiǎn)單，可以通過ref或js方式獲取和設(shè)置元素的高度。在進(jìn)行頁面布局和動(dòng)態(tài)效果時(shí)，我們需要注意元素的padding和border會(huì)影響元素的高度，需要進(jìn)行相應(yīng)的計(jì)算。在實(shí)際開發(fā)中，我們可以根據(jù)實(shí)際情況選擇合適的方式來操作dom height。