使用vue项目中style样式修改的两个方法（不使用v-bind）

想要动态控制元素的style属性最直接的就是使用v-bind
下面案例使用了另外的两种方法：

1. ref绑定
2. 直接操作DOM元素

<template>
  <div id="app">
    <div class="son" @click="change(0)" ref="lengends"></div>
    <div class="son" @click="change(1)" ref="lengends"></div>
  </div>
  <!-- /#app -->
</template>

<script>
export default {
  name: "About",
  data(){
    return{
      lengend:{
        color:['red','yellow'],
        seen:[true,true]
      }
    }
  },
  mounted() {
    //挂载之后才可以操作DOM树
    let son=document.getElementsByClassName('son')
    for (let i=0;i<son.length;i++){
      son[i].style.backgroundColor=this.lengend.color[i]
    }
  },
  methods:{
    change(val){
      this.lengend.seen[val]=!this.lengend.seen[val]
      //直接利用ref操作DOM元素属性(对于大量的非v-for结构不友好)
      // this.$refs.lengends.style.backgroundColor=this.lengend.seen[val]?this.lengend.color[val]:'gray'

      //返璞归真啊，真的是（原生js才是真的神）
      let son=document.getElementsByClassName('son')
      son[val].style.backgroundColor=this.lengend.seen[val]?this.lengend.color[val]:'gray'
    }
  }
}
</script>

<style scoped>
.son {
  height: 100px;
  width: 100px;
  margin: 20px;
}
</style>

点击效果图：