vue组件中用JS获取DOM的classname，如何确保获取的classname是唯一的？

Question

问题不好描述，我举个例子说明，比如下面一段代码是页面头部的：

<template>
  <div class="header">
    ...
  </div>
</template>
<script>
export default {
  mounted: ()=>{
    document.getElementsByClassName('header')[0].style.colro='red'
  }
}
</script>
<style scoped>
  .header {
    background: #999999;
  }
<style>

上面的代码style中因为加入了scoped，所以不用担心页面中其他地方使用了相同的classname(.header)，这里的.header样式一定是指向本组件中的header。可是如果想用JS控制header样式就不好办了，如果页面其他地方也有个header样式那么document.getElementsByClassName('header')[0]可能就不是我想要选择的DOM，请问怎么才能用JS控制DOM而不用担心样式同名？

Answer 1

mounted不能使用箭头函数

Answer 2

了解一下 this.$el, 官方文档

Answer 3

用 $refs获取dom。 链接