cari

Rumah  >  Soal Jawab  >  teks badan

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

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>

P粉287345251P粉287345251383 hari yang lalu479

membalas semua(1)saya akan balas

  • P粉080643975

    P粉0806439752024-02-26 14:50:06

    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

    balas
    0
  • Batalbalas