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

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

 

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

 

通过下标区分：

代码如下：

html:

        

          

            

              
                
                

                  
{{tab_list.aTitle}}
                  
|
                  
${{tab_list.aPrice}}
                
              
            
          
        

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是一个数组，里面的三个样式名要用“”包裹，不然会当做一个变量，报错