vue3获取元素并修改元素样式

在Vue 3中，你可以使用ref来获取DOM元素的引用，并使用onMounted生命周期钩子来确保在元素被挂载后获取它。然后，你可以通过引用的.value属性来修改元素的样式。

以下是一个简单的例子：

<template>
  <div>
    <div ref="myDiv">我是一个DIV</div>
    <button @click="changeStyle">点击我改变样式</button>
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
 
const myDiv = ref(null);
 
const changeStyle = () => {
  if (myDiv.value) {
    myDiv.value.style.color = 'blue';
    myDiv.value.style.fontSize = '20px';
  }
};
 
onMounted(() => {
  // 当组件挂载后，你可以在这里直接调用 changeStyle 来设置样式
  changeStyle();
});
</script>

在这个例子中，我们定义了一个<div>元素并通过ref属性绑定了一个引用myDiv。在setup脚本中，我们导入了ref和onMounted，并创建了changeStyle函数来修改样式。当组件被挂载后，onMounted会调用changeStyle函数，从而使得<div>元素的样式被立即设置。