vue3获取dom并修改样式

在 Vue3 中获取 DOM 并修改样式可以通过 `ref` 和 `setup` 函数来实现。以下是一个简单的例子：

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

<script>
import { ref } from 'vue'

export default {
  setup() {
    const myDiv = ref(null) // 定义一个 ref

    // 在 onMounted 钩子函数中获取 DOM 并修改样式
    const onMounted = () => {
      myDiv.value.style.color = 'red'
    }

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

在上面的例子中，我们首先定义了一个 `ref` 变量 `myDiv`，然后在 `setup` 函数中定义了一个 `onMounted` 函数，在这个函数中通过 `myDiv.value` 来获取 DOM 并修改样式。最后将 `myDiv` 和 `onMounted` 函数返回给模板中使用。在模板中，我们将 `myDiv` 和 `onMounted` 分别绑定到 `div` 标签和 `onMounted` 钩子函数上，当组件渲染完成后，`onMounted` 钩子函数就会被触发，从而修改 `div` 标签的样式。

相关问题

vue ref获取dom后判断dom的class并修改

可以使用 `ref` 获取到 DOM 后，通过 `classList` 属性获取到 DOM 元素的 class 列表，进而判断是否含有指定的 class，并通过 `classList` 属性的 `add` 或 `remove` 方法来添加或移除指定的 class。

具体实现代码如下：

<template>
  <div ref="myDiv" class="box"></div>
</template>

<script>
export default {
  mounted() {
    const myDiv = this.$refs.myDiv;
    if (myDiv.classList.contains("box")) {
      myDiv.classList.remove("box");
      myDiv.classList.add("new-box");
    }
  },
};
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

.new-box {
  width: 150px;
  height: 150px;
  background-color: blue;
}
</style>

上述代码中，通过 `ref` 属性获取到 `div` 元素，并判断其是否含有 `box` 类，如果含有则先移除 `box` 类，再添加 `new-box` 类，从而修改了 DOM 元素的样式。

vue refs获取dom修改背景颜色

### 回答1：
在Vue中，可以使用refs来获取DOM元素并进行相应的操作。首先，在template中给需要操作的元素添加一个ref属性，如下所示：

<div ref="myElement">这是一个需要操作的元素</div>

然后，在Vue实例中，使用this.$refs来访问该元素的DOM对象，并进行相关的操作。比如，要修改元素的背景颜色，可以使用以下代码：

<script>
export default {
  mounted() {
    const element = this.$refs.myElement; // 获取DOM对象
    element.style.backgroundColor = "red"; // 修改背景颜色为红色
  },
};
</script>

在mounted钩子函数中，通过this.$refs.myElement可以获取到带有ref属性为myElement的元素的DOM对象。然后，通过element.style.backgroundColor来修改元素的背景颜色，这里将背景颜色修改为红色。

需要注意的是，refs获取到的是真实的DOM元素，因此可以直接对其进行操作，但是避免直接在模板中修改DOM元素的样式，遵循Vue的响应式原则，应该通过更新数据来改变DOM的样式。

### 回答2：
使用Vue的refs属性可以获取到DOM元素的引用，在修改背景颜色时，可以通过修改DOM的style属性来实现。

下面是一个简单的示例：

1. 首先，在Vue模板中定义一个需要修改背景颜色的DOM元素，并通过ref属性给它命名：

<template>
  <div>
    <div ref="myElement">这是一个DOM元素</div>
    <button @click="changeColor">修改背景颜色</button>
  </div>
</template>

2. 在Vue实例中，使用refs属性获取DOM元素的引用，并编写修改背景颜色的方法：

<script>
  export default {
    methods: {
      changeColor() {
        // 获取DOM元素的引用
        const myElement = this.$refs.myElement;

        // 修改背景颜色
        myElement.style.backgroundColor = 'red';
      },
    },
  };
</script>

通过点击按钮，调用changeColor方法，就可以将myElement的背景颜色修改为红色。