Vue3 生成蓝色背景圆角 div 组件：使用 ref 和 function 代码示例

<template>
  <div class='blue-div' :style="{ height: divHeight.value }"></div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const divHeight = ref('100%');

function setDivHeight() {
  divHeight.value = window.innerHeight + 'px';
}

function onResize() {
  setDivHeight();
}

window.addEventListener('resize', onResize);

function onDestroy() {
  window.removeEventListener('resize', onResize);
}

onMounted(() => {
  setDivHeight();
});

onUnmounted(() => {
  onDestroy();
});

</script>
<style scoped>
.blue-div {
  background-color: blue;
  border-radius: 30px;
}
</style>