vue 循环出来的三个标签加不同的颜色

需求：vue循环通过后台接口获得三张图片，给每张图片加不同的背景颜色。

通过三目运算的话只能给其中两个元素添加颜色。

通过下标区分：

代码如下：

html:

        <div class="mainBox">
          <div class="city-box" v-for="(tab_list,index) in home_list" :key="tab_list.id">
            <div class="img-box">
              <router-link :to="tab_list.aLink">
                <img :src="tab_list.aImages" alt="">
                <div class=" same-three" :class="sstt[index]">
                  <div class="city">{{tab_list.aTitle}}</div>
                  <div class="split-line">|</div>
                  <div class="price">${{tab_list.aPrice}}</div>
                </div>
              </router-link>
            </div>
          </div>
        </div>

js:

data() {
      return {
          sstt:[
            "ss1",
            "ss2",
            "ss3",
          ],

css:

.ss1{
    background: red;
  }
  .ss2{
    background: yellow;
  }
  .ss3{
    background: black;
  }

注意：1.v-for 要写index  不然sstt[index] 会报错，index不存在。

           2.sstt是一个数组，里面的三个样式名要用“”包裹，不然会当做一个变量，报错