如何将ul里面的li样式设为不同

如何将ul里面的li样式设为不同

当我们在ul里面使用v-for循环遍历li的时候，如果我们想要对li设置不同的样式我们应该怎么办喃？

• 对此我们可以使用 :nth-child() 选择器
• :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。
• 需要注意的是（第一个子元素的下标是 1）

下面我们利用n为公式的情况

• 使用v-for将数组进行循环遍历

  <ul v-for="(item,index) in items" :key="index" >
    <li>{{index}}:{{item.text}}<br><img :src="item.header"  alt="暂无"/></li>
  </ul>

• style里面的代码

ul:nth-child(4n+1){
 background-color:red;
}
ul:nth-child(4n+2){
  background-color:yellow
}
ul:nth-child(4n+3){
  background-color:blue
}
ul:nth-child(4n){
  background-color:green
}

• 效果图
  -