vue3使用ref获取dom元素然后修改样式怎么弄

在Vue 3中，您可以使用`ref`来获取DOM元素，并通过`value`属性来访问DOM元素的属性和方法。下面是一个例子，演示如何使用`ref`获取DOM元素并修改样式：

<template>
  <div ref="myDiv">Hello, World!</div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const myDiv = ref(null)

    function changeColor() {
      myDiv.value.style.color = 'red'
    }

    return {
      myDiv,
      changeColor
    }
  }
}
</script>

在这个例子中，我们定义了一个`div`元素，并使用`ref`指定了一个名称`myDiv`。在`setup`函数中，我们通过`const myDiv = ref(null)`来创建一个`ref`对象，并初始化为`null`。然后，我们定义了一个`changeColor`函数，它会在被调用时修改`myDiv`的文本颜色为红色。在函数中，我们使用`myDiv.value`来访问`myDiv`的实际DOM元素，并使用`style.color`属性来修改文本颜色。

在模板中，您可以使用`ref`指令来将DOM元素绑定到`myDiv`，并在需要时调用`changeColor`函数来修改样式。例如：

<template>
  <div ref="myDiv">Hello, World!</div>
  <button @click="changeColor">Change Color</button>
</template>

在这个例子中，我们在模板中使用`ref="myDiv"`将`div`元素绑定到`myDiv`变量。然后，我们在按钮上绑定了一个`@click`事件，当按钮被点击时，会调用`changeColor`函数来修改文本颜色。