vue3操作dom元素

在Vue3中，可以使用`ref`来获取DOM元素的引用，然后通过操作这个引用来修改DOM元素的属性或内容。

例如，在模板中给一个元素添加一个`ref`属性：

<template>
  <div>
    <p ref="myParagraph">这是一个段落</p>
  </div>
</template>

然后在组件中可以通过`this.$refs`来访问这个元素的引用，并对其进行操作：

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

  export default {
    setup() {
      const myParagraph = ref(null)
      
      onMounted(() => {
        myParagraph.value.style.color = 'red'
      })

      return {
        myParagraph
      }
    }
  }
</script>

在上面的例子中，我们使用`ref`创建了一个名为`myParagraph`的引用，并在组件的`setup`函数中通过`onMounted`钩子函数来对这个元素的样式进行修改。

相关问题

vue3怎么操作dom

Vue3 使用了 Composition API，官方推荐使用 template 或 JSX 语法来编写页面，而不是直接操作 DOM。如果需要操作 DOM，可以使用 ref 或 reactive 来引用 DOM 元素，然后通过操作引用来改变 DOM。同时，Vue3 提供了一些钩子函数来方便地对 DOM 进行操作，例如 onMounted、onUpdated 等。