Vue3 Script Setup（组合式API）中如何设置DOM元素高度？

你之前的代码无法生效的核心原因：

• innerHeight、outerHeight 是DOM元素的只读属性，仅用于获取元素的高度值（分别对应包含padding的内部高度、包含padding+边框+外边距的外部高度），不能通过赋值修改样式。
• 直接给element.value.height赋值没有意义，这不是控制元素样式的标准方式。

下面是几种正确的实现方式：

方法1：直接操作DOM元素的style属性 #

通过element.value.style.height设置样式，注意必须带单位（如px）：

<script setup>
import { ref, onMounted } from 'vue'

const element = ref(null)

onMounted(() => {
  if (element.value) {
    element.value.style.height = '200px'
  }
})
</script>

<template>
  <div ref="element" class="w-6/12 p-4 mx-auto rounded border border-slate-400 bg-slate-50 shadow cursor-pointer hover:border-slate-600 hover:shadow-md transition mb-4 overflow-hidden transition-all duration-500">
    <!-- 内容区域 -->
  </div>
</template>

方法2：Vue响应式动态绑定style（推荐） #

利用Vue的响应式特性，通过绑定style对象控制高度，更符合Vue开发习惯：

<script setup>
import { ref } from 'vue'

const elementHeight = ref('auto')

// 可在任意逻辑中修改高度，比如初始化时
const setFixedHeight = () => {
  elementHeight.value = '200px'
}
</script>

<template>
  <div 
    ref="element" 
    :style="{ height: elementHeight }"
    class="w-6/12 p-4 mx-auto rounded border border-slate-400 bg-slate-50 shadow cursor-pointer hover:border-slate-600 hover:shadow-md transition mb-4 overflow-hidden transition-all duration-500"
    @click="setFixedHeight"
  >
    <!-- 内容区域 -->
  </div>
</template>

方法3：通过CSS类控制高度 #

先定义固定高度的CSS类，再通过响应式绑定或JS操作切换类：

<script setup>
import { ref, onMounted } from 'vue'

const hasFixedHeight = ref(false)

onMounted(() => {
  hasFixedHeight.value = true
})
</script>

<style scoped>
.fixed-height {
  height: 200px;
}
</style>

<template>
  <div 
    ref="element" 
    :class="{ 'fixed-height': hasFixedHeight }"
    class="w-6/12 p-4 mx-auto rounded border border-slate-400 bg-slate-50 shadow cursor-pointer hover:border-slate-600 hover:shadow-md transition mb-4 overflow-hidden transition-all duration-500"
  >
    <!-- 内容区域 -->
  </div>
</template>

内容的提问来源于stack exchange，提问作者Artur Müller Romanov