01.Vue中通过点击div更改背景颜色(本人新手，记录学习过程)

1. 通过v-bind:class 实现

<div id="app">
  <div :class="{active : currentIndex == index}"
       v-for="(item,index) in info"
       @click="divCLick(index)">{{item}}
  </div>
</div>

<script>
  /**
   *  设置currentIndex=0  获取当前点击的div下标值
   *    ①：currentIndex = 0时，
   *        :class="{active : currentIndex （0） == index （0）}  返回true，第一个默认显示背景颜色
   *       而其他两个div:
   *        :class="{active : currentIndex (1) == index (0)}  返回false，没有应用css样式
   *        :class="{active : currentIndex (2) == index (0)}  同上
   * */
  const vm = new Vue({
    el: "#app",
    data: {
      currentIndex : 0,
      info : ['div1','div2','div3']
    },
    methods : {
      divCLick(index){
        this.currentIndex = index
      }
    }
  })
</script>

2. 通过v-bind:style实现

<div id="app">
  <div v-for="(item,index) in info"
  @click="divClick(index)"
  :style="colorDiv(index)">{{item.name}}</div>

<!-- 不使用computed 
:style="{backgroundColor : info[index].isActive == true ? 'green' : 'white' " -->
</div>
<script src="../js/vue.js"></script>
<script>
  const vm = new Vue({
    el: "#app",
    data: {
      info : [
        {name : 'div1',isActive : false},
        {name : 'div2',isActive : false},
        {name : 'div3',isActive : false}
      ]
    },
    methods : {
      divClick(index){
        this.info[index].isActive = !this.info[index].isActive ;
      }
    },

    /** vue中computed计算属性无法直接进行传参，如果有传参数的需求可以使用闭包函数（也叫匿名函数）实现。 */
    computed : {
      colorDiv() {
        return function (index) {
          return this.info[index].isActive == true ? {backgroundColor : 'green'} : {backgroundColor: 'white'}
        }
      }
    }
  })
</script>

标签：info,index,01,false,Vue,currentIndex,div,class,isActive
来源： https://blog.csdn.net/Aiydairuning/article/details/117398138