vue——如何给v-for循环出来的元素设置不同的样式

例如给循环出来的四个盒子设置不同的背景色
第一步：给要循环的盒子动态绑定class名 并且传入一个数组

       

       <div v-for="(i,a) in serve" class="sever_box2">
            <div :class="sstt[a]">
              <img :src="i.imgs" alt=""/>
              <router-link :to="i.url">
                <span>{{i.title}}</span>
              </router-link>
              <p>{{i.english}}</p>
            </div>
          </div>

第二步：在data中定义这个数组

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

第三步：在style中分别设置颜色

.ss1{
    background: #71b262;
  }
  .ss2{
    background: #6288b2;
  }
  .ss3 {
    background: #ecac60;
  }
  .ss4{
    background: #f87171;
  }

舒尔特汉字颜色方格代码： 

 小程序舒尔特方格源代码_我爱的昵称为什么都存在的博客-CSDN博客小程序舒尔特方格源代码，使用uniapp编写https://blog.csdn.net/weixin_50501118/article/details/125075453