前端Vue循环渲染列表v-for奇数行或者偶数行加样式两种方法动态绑定class

直接复制页面查看想要的效果
active是class选择器

<template>
  <div>
    <!-- %前端代表 取余数 -->
    <ul>
      <!-- (用哪个注释掉哪个，list-item这是原始样式，若使用奇数，则设置的是偶数行样式，反之亦然) -->
      <li class="list-item" v-for="(item, index) in list">
        <!-- 第一种： -->
        <!-- 奇数行加样式 -->
        <div :class="{ active: index % 2 != 1 }">{{ item.name }} <br /></div>
        <!-- 偶数行加样式 -->
        <!-- <div :class="{ active: index % 2 != 0 }">{{ item.name }} <br /></div> -->

        <!-- 第二种： 三目运算方式设置样式，也可以实现设置奇数或者偶数样式  index索引商1余2 则设置偶数行样式，反之亦然，直接看效果设置 -->
        <!-- 下面这是给偶数行加样式 -->
        <!-- <div class="list-item" :class="{ active: index % 2 ? 1 : 0 }">{{ item.name }} <br /></div> -->
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: "嗷嗷", value: 1 },
        { id: 2, name: "史蒂夫", value: 2 },
        { id: 3, name: "文体", value: 3 },
        { id: 4, name: "瑜伽课", value: 4 },
        { id: 5, name: "同于㐇", value: 5 },
        { id: 6, name: "太平洋", value: 6 },
      ],
    };
  },
};
</script>

<style scoped>
/* .list-item{
  color: pink;
} */
.active {
  height: 20px;
  font-size: 20px;
  position: relative;
  left: 10%;
  color: red;
}
</style>