我是 Vue 新手,我正在研究這個 Vue3 輪播插件中的活動類示例。我想僅顯示 carousel__slide--active
類的文本和鏈接 div,但現(xiàn)在所有 carousel__items
都會顯示其相應(yīng)的文本和鏈接。看來我應(yīng)該能夠僅針對子類 carousel__slide--active
執(zhí)行 v-if 或 v-bind 來顯示 image.text 和 image.link,但我無法讓其中任何一個工作。任何建議將不勝感激。
相關(guān)代碼:
<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>
你也可以使用css來解決這個問題,但是如果你想使用“vue-way”,你需要檢查當(dāng)前幻燈片才能確定是否顯示內(nèi)容。
有關(guān)使用的文檔(我想說)不是很清楚,但是如果您查看源代碼,您會發(fā)現(xiàn) Carousel
組件確實使用 modelValue
來綁定當(dāng)前索引。
模板:
sssccc ![]()
所以你有索引(i
in v-for="(image, i) in stack.images"
)并將其與currentSlide
進行比較