实现效果：一个组件中三个相同的盒子，要点击其中一个盒子改变其背景色，点击另一个盒子改变另一个盒子背景色

非常笨的一种方法哈，大家如果有好的方法，叫一下博主，我也去学习。效果如下：

<template>
  <div>
    <div class="one" @click="changeColorOne"></div>
    <div class="two" @click="changeColorTwo"></div>
    <div class="three" @click="changeColorThree"></div>
  </div>
</template>

<script>
export default {
  methods: {
    changeColorOne(){
      //这里必须要加[0]，因为除去document.getElementsById其他获取到的都是伪数组，假如class名有重复的三个，那么伪数组中就有三个元素
      document.getElementsByClassName('one')[0].style.background = 'yellow'
      document.getElementsByClassName('two')[0].style.background = '#f57'
      document.getElementsByClassName('three')[0].style.background = '#56f'
    },
    changeColorTwo(){
      document.getElementsByClassName('one')[0].style.background = 'olive'
      document.getElementsByClassName('two')[0].style.background = 'yellow'
      document.getElementsByClassName('three')[0].style.background = '#56f'
    },
    changeColorThree(){
      document.getElementsByClassName('one')[0].style.background = 'olive'
      document.getElementsByClassName('two')[0].style.background = '#f57'
      document.getElementsByClassName('three')[0].style.background = '#yellow'
    },
  }
}
</script>

<style lang='scss' scoped>
.one{
  width: 200px;
  height: 200px;
  background: olive;
  float: left;
  margin: 20px;
}
.two{
  width: 200px;
  height: 200px;
  background: #f57;
  float: left;
  margin: 20px;
}
.three{
  width: 200px;
  height: 200px;
  background: #56f;
  float: left;
  margin: 20px;
}
</style>