Vue3 : afficher conditionnellement un div pour un enfant en fonction de la classe du div parent

Question

Je suis nouveau sur Vue et je travaille sur cet exemple de classe d'activité dans le plugin carrousel Vue3. Je veux afficher uniquement carousel__slide--active 类的文本和链接 div，但现在所有 carousel__items 都会显示其相应的文本和链接。看来我应该能够仅针对子类 carousel__slide--active en faisant v-if ou v-bind pour afficher image.text et image.link mais je n'arrive pas à faire fonctionner l'un ou l'autre. Tout avis serait grandement apprécié.

Code associé :

<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

Vous pouvez également utiliser CSS pour résoudre ce problème, mais si vous souhaitez utiliser "vue-way", vous devez vérifier la diapositive actuelle pour déterminer si vous souhaitez afficher le contenu.

La documentation sur l'utilisation n'est (je dirais) pas très claire, mais si vous regardez le code source, vous trouverez Carousel 组件确实使用 modelValue pour lier l'index actuel.

Modèle :

sssccc

Vous avez donc l'indice(i in v-for="(image, i) in stack.images"）并将其与currentSlidepour comparer