Vue3：根据 parent div 的 class 有条件地为 child 显示 div

Question

我是 Vue 的新手，我正在使用 this Vue3 轮播插件中的活动 classes 示例。我只想为 carousel__slide--active class 显示文本和 link div，但现在，所有 carousel__items 都显示其相应的文本和 links。看来我应该能够做一个 v-if 或 v-bind 来显示 image.text 和 image.link 仅用于 child class carousel__slide--active，但我无法让任何一个工作。任何建议将不胜感激。

相关代码：

<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

你也可以用css来解决，但是如果你想用“vue-way”，你需要检查当前幻灯片才能确定是否显示内容与否。

关于使用的文档（我会说）不是很清楚，但是如果你查看源代码，你会发现 Carousel 组件确实使用 modelValue 来绑定当前索引。

模板：

<template>
  <Carousel v-model="currentSlide">
    <Slide v-for="(image, i) in stack.images" :key="image">
      <div class="carousel__item">
        <img
          :src="image.src"
          :alt="image.alt"
          :text="image.text"
          :link="image.link"
        />
        <div class="overlay-shown" v-if="currentSlide === i">
          <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>
    </Slide>
  </Carousel>
</template>

<script>
  // in data or with `ref` via setup
  data: () => ({
    currentSlide: 0,
  })
</script>

所以你有索引（i in v-for="(image, i) in stack.images"）并将其与 currentSlide

进行比较

Vue3：根据 parent div 的 class 有条件地为 child 显示 div

Vue3: display a div conditionally for child based on parent div's class

html

css

carousel

vue.js

vuejs3