Vue3 中如何获取元素并修改其样式

在Vue3开发过程中，获取元素并修改其样式是常见的需求。下面将详细介绍几种有效的方法。

一、使用ref获取元素

可以通过ref来获取元素。在模板中，给需要获取的元素添加一个ref属性。例如：

<template>
  <div ref="targetDiv">这是需要获取的元素</div>
</template>

<script setup>
import { ref } from 'vue';
const targetDiv = ref(null);
</script>

这里targetDiv初始值为null，在组件挂载完成后，它会指向对应的DOM元素。之后就可以通过targetDiv来修改元素样式。比如在一个方法中：

<template>
  <div ref="targetDiv">这是需要获取的元素</div>
  <button @click="changeStyle">修改样式</button>
</template>

<script setup>
import { ref } from 'vue';
const targetDiv = ref(null);
const changeStyle = () => {
  if (targetDiv.value) {
    targetDiv.value.style.color ='red';
    targetDiv.value.style.fontSize = '20px';
  }
};
</script>

二、使用CSS变量

Vue3支持使用CSS变量来间接修改样式。先在CSS中定义变量：

:root {
  --text-color: black;
  --font-size: 16px;
}

在模板中使用该变量：

<template>
  <div :style="{ color: textColor, fontSize: fontSize }">这是应用样式的元素</div>
</template>

<script setup>
import { ref } from 'vue';
const textColor = ref('var(--text-color)');
const fontSize = ref('var(--font-size)');
const changeStyle = () => {
  textColor.value ='red';
  fontSize.value = '20px';
};
</script>

这种方式将样式逻辑和DOM操作分离，代码更易维护。

三、使用计算属性

计算属性也可用于获取和修改元素样式。例如：

<template>
  <div :style="elementStyle">这是需要修改样式的元素</div>
</template>

<script setup>
import { ref } from 'vue';
const color = ref('black');
const fontSize = ref('16px');
const elementStyle = computed(() => {
  return {
    color: color.value,
    fontSize: fontSize.value
  };
});
const changeStyle = () => {
  color.value = 'blue';
  fontSize.value = '24px';
};
</script>

计算属性根据依赖的数据自动更新，确保样式的一致性和响应式。

通过以上几种方法，开发者在Vue3中能够灵活地获取元素并修改其样式，满足不同场景下的需求，提升应用的用户体验和视觉效果。