条件样式未应用于 div

Question

我正在尝试映射包含在 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”class。

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

我的条件样式代码似乎是正确的，但我很想听听更有经验的人的意见。

Answer 1

我会为此使用一种方法

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>

Answer 2

您可以通过 :nth-child 和 :nth-last-child 仅使用 CSS 定位这些元素，并应用样式使元素 100% 变宽，这样您就不会需要引入不必要的逻辑。

例如

section {
  display: flex;
  flex-flow: row wrap;
  gap: 10px;  
}

div {
  background: yellowgreen;
  height: 100px;
  flex: 1 1 auto;
}

div:is(:nth-child(1), 
       :nth-child(2), 
       :nth-last-child(1), 
       :nth-last-child(2)) {
   flex-basis: 100%;
}

<section>
  <div class="row">1</div>
  <div class="row">2</div>
  <div class="row">3</div>
  <div class="row">4</div>
  <div class="row">5</div>
  <div class="row">6</div>
  <div class="row">7</div>
  <div class="row">8</div>
  <div class="row">9</div>
</section>

条件样式未应用于 div

Conditional styling not being applied to a div

javascript

css

vue.js

primevue