国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Vue3:根據(jù)父div的類有條件地為子顯示div
P粉287345251
P粉287345251 2024-02-25 15:34:06
0
1
546

我是 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>

P粉287345251
P粉287345251

全部回復(fù)(1)
P粉080643975

你也可以使用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進行比較

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板