Javascript 未将条件样式应用于div

我正在尝试映射一个包装在div中的卡片数组，但我希望第一个、第二个、第二个到最后一个，并且这些div中的最后一个会导致新行/占据整行。我正在使用Vue3和PrimeVue组件库

<div class="row" v-for="(task, index) in tasks" :class="{ 
    'p-col-12 dp-block': index === 0,
    'p-col-12 dp-block': index === 1,
    'p-col-12': index == tasks.length-2,
    'p-col-12': index === tasks.length-1,
     }" :key="task">
        <Card style="width: 25em; vertical-align: middle;">
            // card content
        </Card>
</div>

//卡片内容

在上面的代码中，我正在检查数组中每个项的索引，如果该项的索引为0、1、tasks.length-1或tasks.length-2，则应该对其应用“p-col-12”类

在我的例子中，倒数第二个元素没有应用该类

---

我的条件样式代码似乎是正确的，但我希望从更有经验的人那里得到意见。

我会为此使用一种方法

methods: {
  getStyleClasses() {
    let className = ''
    if (
      this.index === this.tasks.length - 2 ||
      this.index === this.tasks.length - 1
    )
      className = className.concat(' p-col-12')
    if (this.index === 0 || this.index === 1)
      className = className.concat(' dp-block')
    return className
  },
},

像这样使用它

<div
  class="row"
  v-for="(task, index) in tasks"
  :class="getStyleClasses()"
  :key="task"
>
  <Card style="width: 25em; vertical-align: middle;">
        // card content
  </Card>
</div>

//卡片内容

我会为此使用一种方法

methods: {
  getStyleClasses() {
    let className = ''
    if (
      this.index === this.tasks.length - 2 ||
      this.index === this.tasks.length - 1
    )
      className = className.concat(' p-col-12')
    if (this.index === 0 || this.index === 1)
      className = className.concat(' dp-block')
    return className
  },
},

像这样使用它

<div
  class="row"
  v-for="(task, index) in tasks"
  :class="getStyleClasses()"
  :key="task"
>
  <Card style="width: 25em; vertical-align: middle;">
        // card content
  </Card>
</div>

//卡片内容

您可以仅使用CSS，通过

:n子项

和

:n最后一个子项

将这些元素作为目标，并应用样式使元素

100%

变宽，因此不需要引入不必要的逻辑

例如。

部分{
显示器：flex；
柔性流：行换行；
间隙：10px；
}
div{
背景：黄绿色；
高度：100px；
flex:1自动；
}
div:is（：n个孩子（1），
：第n个孩子（2），
：n最后一个孩子（1），
：n最后一个孩子（2））{
弹性基准：100%；
}

1.
2.
3.
4.
5.
6.
7.
8.
9

您可以仅使用CSS，通过

:n子项

和

:n最后一个子项

将这些元素作为目标，并应用样式使元素

100%

变宽，因此不需要引入不必要的逻辑

例如。

部分{
显示器：flex；
柔性流：行换行；
间隙：10px；
}
div{
背景：黄绿色；
高度：100px；
flex:1自动；
}
div:is（：n个孩子（1），
：第n个孩子（2），
：n最后一个孩子（1），
：n最后一个孩子（2））{
弹性基准：100%；
}

1.
2.
3.
4.
5.
6.
7.
8.
9

Hello，我将创建一个返回适当类的方法Hello，我将创建一个返回适当类的方法