使用Vue時，我們經常需要動態設定某個元素的高度。

在Vue中，動態設定高度的方式可以分為兩種：

1. 直接使用style屬性設定高度

<template>
<div :style="{ height: height + 'px' }">
這是一個高度為 {{ height }}px 的元素。
</div>
</template>
<script>
export default {
data() {
return {
height: 100
}
}
}
</script>

在上面的示例中，使用了Vue的對象語法，將height變量的值設定為100。同時，在template中使用了style屬性，設定該div元素的高度為height變量的值，也就是100px。使用{{ height }}可以將變量的值插入到div中。

2. 使用動態class和CSS樣式設定高度

<template>
<div :class="{ heightStyle: true }">
這是一個高度為 {{ height }}px 的元素。
</div>
</template>
<script>
export default {
data() {
return {
height: 100
}
},
computed: {
heightStyle() {
return {
height: this.height + 'px'
}
}
}
}
</script>
<style>
.heightStyle {
height: 100px;
}
</style>

在這個示例中，template中使用了動態class，即:class="{ heightStyle: true }"，其中heightStyle是一個computed屬性，返回一個對象，對象中包含了CSS樣式屬性height。最終，CSS樣式height的值設定為height變量的值，也就是100px。

總結

使用Vue動態設定元素高度主要有兩種方式，一種是直接在style屬性中設定高度，另一種是通過動態class和CSS樣式設定高度。無論哪種方式，都可以在Vue中輕松實現對元素高度的設定。