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>
  1. 通过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>
上一篇:2021-10-28


下一篇:【whk向】初中数学杂题选做