Vue中v-for循环如何根据索引条件动态设置CSS类

核心逻辑为通过Vue的动态类绑定语法:class，结合v-for默认从0开始计数的索引值做条件判断，以下是两种常用实现方式：

方式1：直接在模板内做条件判断（适合简单逻辑） #

直接修改循环外层div的类绑定规则即可，修正后的完整代码如下：

<div
  :class="[
    index === 0 ? 'col-md-7' : 
    index === 1 ? 'col-md-5' : 
    index === 3 ? 'col-md-8' : 
    'col-md-4'
  ]"
  v-for="(destinations, index) in pageData.topDestinations" 
  :key="index"
>
  <div
    class="banner _h-45vh _br-4 _bsh-xl _bsh-light banner-animate banner-animate-mask-in banner-animate-zoom-in banner-animate-slow"
  >
    <div 
      class="banner-bg"
      v-bind:style="`background-image:url('${destinations.destImage}');`"
    ></div>
    <div class="banner-mask"></div>
    <a class="banner-link" href="#"></a>
    <div
      class="banner-caption _bg-w _p-20 _w-a banner-caption-bottom banner-caption-dark"
    >
      <h5 class="banner-title">{{ destinations.name }}</h5>
      <p class="banner-subtitle _mt-5 _fw-n">
        Starts {{ destinations.priceCurrency }} {{ destinations.priceStarts }}
      </p>
    </div>
  </div>
</div>

以上判断逻辑完全匹配需求：

• 第1项（索引0）返回col-md-7
• 第2项（索引1）返回col-md-5
• 第4项（索引3）返回col-md-8
• 其余所有项（第3、5、6、7项及之后）统一返回col-md-4

方式2：抽离为方法（适合逻辑复杂、后续可能调整规则的场景） #

先在Vue实例的methods中添加对应方法：

methods: {
  getColClass(index) {
    switch(index) {
      case 0: return 'col-md-7'
      case 1: return 'col-md-5'
      case 3: return 'col-md-8'
      default: return 'col-md-4'
    }
  }
}

然后模板里的类绑定直接调用方法即可：

<div
  :class="getColClass(index)"
  v-for="(destinations, index) in pageData.topDestinations" 
  :key="index"
>
<!-- 其余内容不变 -->
</div>

这种方式维护性更高，后续要修改类规则只需要调整getColClass方法即可，不需要改动模板代码。

内容的提问来源于stack exchange，提问作者Vinay Thakur