前端Vue循环渲染列表动态绑定奇偶数的class

Q520@yuyan

已于 2022-10-31 09:49:48 修改

阅读量646

点赞数

文章标签： vue.js 前端 javascript

于 2022-10-27 15:02:54 首次发布

本文链接：https://blog.csdn.net/weixin_57725256/article/details/127552818

版权

<template>
  //奇数
  <div v-for="(i, index) in courtDataList" :key="index">
  <p :class="{ active: index % 2 != 0 }" >{{ i }}</p>
  </div>
  // 偶数     
  <div v-for="(i, index) in courtDataList" :key="index">
  <p :class="{ active: index % 2 != 1 }" >{{ i }}</p>
  </div>
    
</template>
<script>

import {getListAllCourt,} from "@/api/services/inspect";

export default {
  name: "smart-polling",
  
  data() {
    return {
     
    };
  },
  
  methods: {
      this.getListAllCourtData();

  }
  // 获取数据
    getListAllCourtData() {
      getListAllCourt(this.setUserInfo.courtId).then((res) => {
         this.courtDataList = res.data;
      });
    },
};
</script>

<style lang="scss" scoped>
    .roll-right {
      div {
        color: #4fe1ad;

        .active {
          color: #53acff;
        }
      }
}
</style>