条件样式未应用于 div答案

【问题标题】：Conditional styling not being applied to a div条件样式未应用于 div
【发布时间】：2021-08-08 09:42:59
【问题描述】：

我正在尝试映射包含在 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" 类应用于它。

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

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

【问题讨论】：

您好，我会创建一个返回相应类的方法

标签： javascript css vue.js primevue

【解决方案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>

【讨论】：

【解决方案2】：

您可以仅使用 CSS 定位这些元素，通过 :nth-child 和 :nth-last-child 并应用样式以使元素 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>

【讨论】：