see：https://github.com/hi-cooper/vue-learning.git

1 方法

1）声明ref变量refContainer；

2）DOM元素添加ref属性，值指向refContainer

3）使用refContainer.value即可操作DOM元素

<template>
  <!-- DOM元素添加"ref"属性，值指向"ref变量" -->
  <div ref="refContainer"></div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const refContainer = ref(); // 声明ref变量

// 使用refContainer.value即可操作DOM元素
</script>

2 示例

<template>
  <button @click="increase">增加高度</button>
  <button @click="reduce">减少高度</button>
  <div ref="refContainer" class="container"></div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const refContainer = ref();

function increase() {
  let height = refContainer.value.offsetHeight;
  refContainer.value.style.height = height + 50 + 'px';
}

function reduce() {
  let height = refContainer.value.offsetHeight;
  refContainer.value.style.height = height - 50 + 'px';
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100px;
  background-color: cornflowerblue;
}
</style>