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

• Z时代
• 2024-02-25
• 分类：IT

全部代码：

 <template>
  <div class="wrapper">
    <!-- 循环遍历数组中每一项 -->
    <el-row v-for="(item, index) in list " :key="index" :class="['table-col', item.index === 2 ? activeCls : '']">
      <el-col v-for="( item2, index2 ) in  item " :key="index2" :span="24 / item.length" class="table-item">
        <span
          :class="[item2.title === 'Result' ? activeCls : '', item2.title === 'SN' ? 'green' : '', item2.title === 'Time' ? 'green' : '', item2.title === '工站' ? 'darkblue' : '', labelCls]">{{
            item2.title }}</span>
        <span :class="[item2.value === 'NG' ? activeCls : '', valueCls]">{{ item2.value }}</span>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [
      ]
    }
  },
  data () {
    return {
      activeCls: 'red',
      labelCls: 'label',
      valueCls: 'value'
      // table_col: 'table_col'
    }
  }
}
</script>
<style lang="less" scoped>
.wrapper {
  width: 100%;
  height: 100%;
  margin-bottom: 5px;
  // height: 350px;
  // overflow: auto;
  // border: solid 1px #6b6b6b;
  // height: 40px;
  .table-col {
    border-bottom: solid 1px #eaf2f8;
    height: 40px;
    display: flex;
  }
  .table-item:not(:last-child) {
    border-right: solid 1px #eaf2f8;
  }
  .table-item {
    height: 100%;
    display: flex;
    >div {
      display: flex;
    }
    .label {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50%;
      text-align: center;
      background: #f2f9fc;
      color: #201f1f;
      background-color: rgb(62, 177, 249);
    }
    .green {
      background-color: green;
    }
    .red {
      background-color: red;
    }
    .darkblue {
      background-color: #0421f9;
    }
    .value {
      display: flex;
      width: 50%;
      align-items: center;
      justify-content: center;
      word-wrap: break-word;
      color: #222;
      font-size: 14px;
      font-weight: bold;
      flex: 1;
      background-color: #faa124;
    }
  }
}
</style>

回答：

: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>

回答：

<el-row
      v-for="(item, index) in tabList"
      :key="index"
      :class="['table_col', item.value == 2 ? 'red' : '']"
    >
      <span>{{ item.value }}</span>
    </el-row>

table_col必须加引号，代表的是字符串，也就是css中定义的.table_col,你不加引号的话，会被当作变量处理，而data中又没有定义变量，所以只需加个引号就行。

以上是 根据遍历到的数组索引动态绑定样式，为何实现不了？ 的全部内容， 来源链接： utcz.com/p/934552.html