Vue3: 상위 div의 클래스를 기반으로 하위 div를 조건부로 표시합니다.

Question

저는 Vue를 처음 접했고 Vue3 캐러셀 플러그인에서 이 활동 클래스 예제를 작업 중입니다. image.text 및 image.link를 표시하기 위해 v-if 또는 v-bind를 사용하여 carousel__slide--active 类的文本和链接 div，但现在所有 carousel__items 都会显示其相应的文本和链接。看来我应该能够仅针对子类 carousel__slide--active만 표시하고 싶지만 둘 중 하나를 작동시킬 수 없습니다. 어떤 조언이라도 대단히 감사하겠습니다.

관련 코드:

<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비교