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的背景颜色修改为红色。