Vue3: Paparkan div secara bersyarat untuk kanak-kanak berdasarkan kelas div induk

Question

Saya baru menggunakan Vue dan saya sedang mengusahakan contoh kelas aktiviti ini dalam pemalam karusel Vue3. Saya mahu memaparkan sahaja carousel__slide--active 类的文本和链接 div，但现在所有 carousel__items 都会显示其相应的文本和链接。看来我应该能够仅针对子类 carousel__slide--active melakukan v-if atau v-bind untuk memaparkan imej.teks dan imej.pautan tetapi saya tidak boleh membuat salah satu daripadanya berfungsi. Sebarang nasihat akan sangat dihargai.

Kod berkaitan:

<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

Anda juga boleh menggunakan css untuk menyelesaikan masalah ini, tetapi jika anda ingin menggunakan "vue-way", anda perlu menyemak slaid semasa untuk menentukan sama ada untuk memaparkan kandungan.

Dokumentasi mengenai penggunaan (saya akan katakan) tidak begitu jelas, tetapi jika anda melihat kod sumber, anda akan dapati Carousel 组件确实使用 modelValue untuk mengikat indeks semasa.

Templat:

sssccc

Jadi anda mempunyai indeks(i in v-for="(image, i) in stack.images"）并将其与currentSlideuntuk membandingkan