vue中给v-for循环出来的元素分别加样式

vue中给v-for循环出来的元素分别加样式

1.绑动态样式`

    <div :class="box" v-for="(item, index) in datas" :key="index">
      <div class="da">
        <div class="box-typ">{{ item.name }}</div>
        <div class="one">{{ item.desc }}</div>
      </div>
      <div class="box-tex">{{ item.cash }}元</div>
    </div>

2.data中声明

  data() {
    return {
      datas: [],
    };
  },

3.最重要的一步，写css样式！！！！！
使用CSS3 :nth-child() 选择器：
使用公式 (an + b)，表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。

.box:nth-child(3n + 2) {
  border-radius: 5px;
  width: 350px;
  height: 117px;
  margin: 20px auto;
  /* background-color: pink; */
  background-image: linear-gradient(90deg, #fa7694 0%, #fdd34b 100%);
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.box:nth-child(3n + 3) {
  border-radius: 5px;
  width: 350px;
  height: 117px;
  margin: 20px auto;
  /* background-color: pink; */
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: linear-gradient(90deg, #09a9e8 0%, #28f0a0 99%);
}
.box:nth-child(3n + 4) {
  border-radius: 5px;
  width: 350px;
  height: 117px;
  margin: 20px auto;
  /* background-color: pink; */
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: linear-gradient(90deg, #e791f5 0%, #1bc9f6 99%);
}

成品

还可以用三目或者v-if写，但是我觉得麻烦，，，用到的小伙伴给个三连啊！！！！！！！！！