vue动态绑定样式

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/liuxin_1991/article/details/81299736

1、循环数据中基础动态绑定样式

<div class="indexItem tal" v-for="(item,index) in tableTittle" :class="indexItem(index)" :title="item.value">{{item.value}}</div>

indexItem(index){
  return "indexItem"+index;
}

<div :class="switchClass (item, items)"></div>

  methods: {
    switchClass (item, items) {
      return {
        active: items.bol && items.iszqda == 'Y',
        wactive: items.bol && items.iszqda == 'N',
        isclick: item.answer != undefined
      }
    }
  }

2、循环数据中给某一个数据绑定样式

<dd class="clearfix" v-for="(item,index) in tableDataList" :class="index == 0 ? 'dd-bg' : ''">

.dd-bg
   background-color :#f7f7f9

 注释：如果是在循环数据中index的值为0的时候，当前dd元素加个样式名为dd-bg

3、循环数据中给第奇数个数据绑定样式 

<dd class="clearfix" v-for="(item,index) in tableDataList" :class="index%2 == 0 ? 'dd-bg' : ''">

4、循环数据中给第偶数个数据绑定样式 

<dd class="clearfix" v-for="(item,index) in tableDataList" :class="index%2 != 0 ? 'dd-bg' : ''">