css - 如何在 for 循环中在 vue 中设置 css 类？

Question

我正在尝试使用 Vuejs颜色编码的客户端列表来实现这样的目标

这是我的 vue 代码的样子

<div class="list-group-item" data-toggle="sidebar" data-sidebar="show" v-for="(client, index) in clients" :key="client.id">
    <a href="#" class="stretched-link"></a>
    <div class="list-group-item-figure">
        <div class="tile tile-circle" :class="getBgColor(++index)"> {{ client.name.charAt(0) }} </div>
    </div>
    <div class="list-group-item-body">
        <h4 class="list-group-item-title"> {{ client.name }} </h4>
        <p class="list-group-item-text"> {{ client.city }}, {{ client.country }} </p>
    </div>
</div>

这是我的脚本，我有我想用来获得适当的 css 类

getBgColor(color) {

    let bg_color = 'bg-blue';

    switch(color) {
    case 1:
        bg_color = 'bg-blue'
        break;
    case 2:
        bg_color = 'bg-indigo'
        break;
    case 3:
        bg_color = 'bg-purple'
        break;
    case 4:
        bg_color = 'bg-pink'
        break;
    case 5:
        bg_color = 'bg-red'
        break;
    case 6:
        bg_color = 'bg-orange'
        break;
    case 7:
        bg_color = 'bg-yellow'
        break;
    case 8:
        bg_color = 'bg-green'
        break;
    case 9:
        bg_color = 'bg-cyan'
        break;
    default:
        bg_color = ''
    }
    this.colorCode++
    return bg_color
}
},

标签： cssclassvuejs2laravel-6.2

Answer 1

您可以将您的类添加到一个数组中，然后在内部getBgColor(index)检查已转了多少圈并扣除所需的索引。我评论了该功能以进一步解释它。

此外，在您的 html 中，您不必递增$index.

new Vue({
  el: "#app",
  data: {
    colorCounter: 0,
    clients: [{
        "name": "Leanne Graham",
        "email": "[e-mail]",
      },
      {
        "name": "Ervin Howell",
        "email": "[e-mail]",
      },
      {
        "name": "Clementine Bauch",
        "email": "[e-mail]",
      },
      {
        "name": "Patricia Lebsack",
        "email": "[e-mail]",
      },
      {
        "name": "Chelsey Dietrich",
        "email": "[e-mail]",
      },
      {
        "name": "Mrs. Dennis Schulist",
        "email": "[e-mail]",
      },
      {
        "name": "Kurtis Weissnat",
        "email": "[e-mail]",
      },
      {
        "name": "Nicholas Runolfsdottir V",
        "email": "[e-mail]",
      },
      {
        "name": "Glenna Reichert",
        "email": "[e-mail]",
      },
      {
        "name": "Clementina DuBuque",
        "email": "[e-mail]"
      }, {
        "name": "Leanne Graham",
        "email": "[e-mail]",
      },
      {
        "name": "Ervin Howell",
        "email": "[e-mail]",
      },
      {
        "name": "Clementine Bauch",
        "email": "[e-mail]",
      },
      {
        "name": "Patricia Lebsack",
        "email": "[e-mail]",
      },
      {
        "name": "Chelsey Dietrich",
        "email": "[e-mail]",
      },
      {
        "name": "Mrs. Dennis Schulist",
        "email": "[e-mail]",
      },
      {
        "name": "Kurtis Weissnat",
        "email": "[e-mail]",
      },
      {
        "name": "Nicholas Runolfsdottir V",
        "email": "[e-mail]",
      },
      {
        "name": "Glenna Reichert",
        "email": "[e-mail]",
      },
      {
        "name": "Clementina DuBuque",
        "email": "[e-mail]"
      }
    ],
    classes: ['bg-blue', 'bg-indigo', 'bg-purple', 'bg-pink', 'bg-red', 'bg-orange', 'bg-yellow', 'bg-green', 'bg-cyan']
  },
  methods: {
    getBgColor: function(index) {
      // Get length of  classes array
      let length = this.classes.length;

      // Get the current turn (how many times the classes have been used from start to finish)
      let turn = Math.floor(index / length);

      // Multiply turn by the length then subtract result from current index
      let colorIndex = index - (turn * length);

      return this.classes[colorIndex];
    }
  }

});

@import url("https://fonts.googleapis.com/css?family=Roboto");
.list {
  padding: 1rem;
  font-family: 'Roboto', sans-serif;
}

.list-group-item {
  display: flex;
  width: 100%;
}

.list-group-item .list-group-item-figure {
  display: flex;
  justify-content: center;
  align-items: center;
}

.list-group-item .list-group-item-figure .tile {
  border-radius: 50%;
  height: 2.5rem;
  width: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  text-transform: uppercase;
  font-weight: bold;
}

h4,
p {
  margin: 0.5rem;
}

p {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 1rem;
}

.bg-blue {
  background-color: blue;
}

.bg-indigo {
  background-color: indigo;
}

.bg-purple {
  background-color: purple;
}

.bg-pink {
  background-color: pink;
}

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

.bg-orange {
  background-color: orange;
}

.bg-yellow {
  background-color: yellow;
}

.bg-green {
  background-color: green;
}

.bg-cyan {
  background-color: cyan;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
  <div class='list'>


    <div class="list-group-item" data-toggle="sidebar" data-sidebar="show" v-for="(client, $index) in clients" :key="$index">
      <a href="#" class="stretched-link"></a>
      <div class="list-group-item-figure">
        <div class="tile tile-circle" :class="getBgColor($index)"> {{ client.name.charAt(0) }} </div>
      </div>
      <div class="list-group-item-body">
        <h4 class="list-group-item-title"> {{ client.name }} </h4>
        <p class="list-group-item-text"> {{ client.email }}, {{ client.country }} </p>
      </div>
    </div>
  </div>
</div>