Rumah > Soal Jawab > teks badan
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粉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"
)并将其与currentSlide
untuk membandingkan