前端 - 根据遍历到的数组索引动态绑定样式，为何实现不了？

Question

 <el-row v-for="(item, index) in  list " :key="index" :class="[table_col,item.index === 2 ? 'red' : '']">


css:
 .red {
    background-color: red;
  }

  .table_col {
    border-bottom: solid 1px #eaf2f8;
  }

Answer 1

:class="['table_col']是字符串，变量的话需要再data里声明
直接上代码了：

<template>
  <div id="app">
    <div
      v-for="(item, index) in list"
      :key="index"
      :class="['table_col', item.index === 2 ? 'red' : '']"
    >
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [{ index: 1 }, { index: 2 }]
    };
  },
};
</script>
<style>
.red {
  background-color: red;
}

.table_col {
  border-bottom: solid 1px #eaf2f8;
}
</style>