Vue3: Zeigt bedingt ein Div für ein untergeordnetes Element an, basierend auf der Klasse des übergeordneten Div

Question

Ich bin neu bei Vue und arbeite an diesem Beispiel für eine Aktivitätsklasse im Vue3-Karussell-Plugin. Ich möchte nur carousel__slide--active 类的文本和链接 div，但现在所有 carousel__items 都会显示其相应的文本和链接。看来我应该能够仅针对子类 carousel__slide--active anzeigen, indem ich v-if oder v-bind ausführe, um image.text und image.link anzuzeigen, aber ich bekomme keines davon zum Laufen. Für jeden Rat wäre ich sehr dankbar.

Zugehöriger Code:

<Slide v-for="(image) in stack.images" :key="image">
  <div class="carousel__item">
    <img
      :src="image.src"
      :alt="image.alt"
      :text="image.text"
      :link="image.link"
    />
    <!-- <div class="{ 'carousel__slide--active': true }"> -->
    <!-- <div v-bind:class="{ 'carousel__slide--active': isActive }"> -->
      <div class="overlay-shown">
        <div v-if="image.text" class="stack-text">{{ image.text }}
        </div>
        <div v-if="image.link" class="stack-text">
          <a v-bind:href="image.link">View Video</a>
        </div>
      </div>
    <!-- </div> -->
  </div>
</Slide>

<style>
.carousel__slide--active > .carousel__item {
  transform: scale(1);
  box-shadow: 8px 8px 5px -4px rgba(0, 0, 0, 0.5);
  z-index: 999 !important;
}

.overlay-shown {
  width: 600px;
  height: auto;
  background-color: #006eb7;
}
</style>

Answer 1

你也可以使用css来解决这个问题，但是如果你想使用“vue-way”，你需要检查当前幻灯片才能确定是否显示内容。

有关使用的文档（我想说）不是很清楚，但是如果您查看源代码，您会发现 Carousel 组件确实使用 modelValue 来绑定当前索引。

模板：

所以你有索引（i in v-for="(image, i) in stack.images"）并将其与currentSlide进行比较