vue3如何获取元素并且修改元素样式

前言

在Vue 3中，我们可以使用一些方法来获取元素并修改元素样式。本文将介绍几种常用的方法，并提供相应的代码示例和解释。

方法一：使用ref

Vue 3中的ref函数可以用来创建一个响应式引用。我们可以使用ref函数来获取DOM元素的引用，并通过操作引用来修改元素样式。

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const elementRef = ref(null);

    onMounted(() => {
      // 获取元素引用
      const element = elementRef.value;

      // 修改元素样式
      element.style.color = 'red';
      element.style.fontSize = '16px';
    });

    return {
      elementRef
    };
  }
}

在上述代码中，我们使用onMounted钩子函数在组件渲染完毕后获取元素引用，并通过引用来修改元素样式。ref函数返回的是一个对象，其中value属性存储了对应的DOM元素。

方法二：使用Vue的组件引用

在Vue 3中，我们可以使用Vue的组件引用来获取元素并修改样式。在模板中添加ref属性并指定一个引用名称，然后我们就可以使用$refs来获取对应的DOM元素引用。

在上述代码中，我们在