时间戳

首页 > 解决方案 > 条件样式未应用于 div

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”应用到它的类。

在我的情况下，倒数第二个元素没有应用该类。

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

标签： javascriptcssvue.jsprimevue

解决方案

您可以仅使用 CSS 来定位这些元素，通过:nth-childand: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>

推荐阅读