前端Vue中接口v-for循环列表交叉每一项并且添加新内容新样式，可调循环位置看图

主要利用下面两点:
给奇数行加v-if=“index % 2 != 1”
给偶数行加v-if="index % 2 != 0"

<template>
  <!-- 调换位置 -->
  <div class="box">
    <!-- %前端代表 取余数 -->
    <!-- index从0开始下标，奇数标index % 2 是1 ，偶数标是0，0代表false，非0的1代表true -->
    <ul style="list-style-type: none">
      <li class="list-item" v-for="(item, index) in dataList" :key="item.id">
        <div class="content">
          <!-- 这里是奇数位置 -->
          <div class="list list_color" v-if="index % 2 != 1">
            <div class="top">
              <div>
                名字:<span>{{ item.name }}</span>
              </div>
              <div>年龄:<span></span>{{ item.value }}</div>
            </div>
          </div>
          <!-- 这里偶数位置 -->
          <div class="list" v-if="index % 2 != 0">
            <div class="top">
              <div>
                名字:<span>{{ item.name }}</span>
              </div>
              <div>年龄:<span></span>{{ item.value }}</div>
            </div>
            <div class="bottom">
              <div>新内容为: <span>我是在上面列表中新加的一项内容</span></div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataList: [
        { 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 },
        { id: 7, name: "的双方各", value: 7 },
        { id: 8, name: "食发", value: 8 },
        { id: 9, name: "规划局", value: 9 },
        { id: 10, name: "各环节图", value: 10 },
        { id: 11, name: "凨他太玉园", value: 11 },
        { id: 12, name: "土鸡汤", value: 12 },
      ],
    };
  },
  mounted() {
    // alert(5%3)
    // 5/3=1 余2
  },
};
</script>

<style scoped>
.box {
  width: 10%;
  margin: auto;
  list-style-type: none;
}
/* .list-item{
  color: pink;
} */
.active {
  height: 20px;
  font-size: 20px;
  position: relative;
  left: 10%;
  color: red;
}
.content {
  width: 100%;
  /* background-color: bisque; */
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}

.list {
  width: 100%;
  height: 100px;
  background: rgb(230, 207, 207);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.top {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
/* 新内容样式 */
.list_color {
  color: rgb(131, 30, 189);
}

/* .bottom{
  color: rgb(4, 143, 207);
} */
</style>