Question

我正在VueJS中构建一个简单的滑块，该滑块使用API调用填充HTML面板。如何在v-for循环中切换其可见性？

<template>
  <div>
    <div id="button-toggle-container" class="button-toggle-container flex justify-center justify-between mt3 mb4 mx-auto">
      <button class="button-toggle" v-for="(slide, index) in Object.keys(slider)" :key="index">{{ slide }}</button>
    </div><!--/toggle-button-container-->
<transition-group name="slide-fade" class="slide-fade-transition flex" tag="div">

      <div class="slide flex flex-wrap" v-for="(slide, index) in Object.values(slider)" :key="index">
        <div class="flex sm-col-12 md-col-12 lg-col-4 border-box" v-for="(card, index) in slide" :key="index">
          <a href="/" class="card-primary slide-card-primary p3 block mx-auto">
            <div class="card-primary-image">
              <img class="fit" src="{{ card.image }}" height="auto" />
            </div>
            <div class="card-primary-content">
              <h3 class="mt2">{{ card.name  }}</h3>
              <p class="mb3 md-hide lg-hide">{{ card.mobileIntro }}</p>
              <p class="mb3 xs-hide">{{ card.desktopImage }}</p>
            </div>
            <div class="button-container center">
              <button class="button-primary mx-auto">View</button>
            </div>
          </a>
        </div>
</div>
<transition-group>
</div>
</template>

Answer 1

您不需要v-for，因为您希望一次仅显示1张幻灯片。因此，您应该始终显示slider[0]（我将其从对象转换为数组，这样将更容易处理），并且我制作了一个函数，该函数可以滚动数组，使第一项成为最后一项。

这是一个非常基本（并且很丑陋：）的滑块示例，但是想法是相同的-准备一个滑块数组，并在指定的间隔后滚动它。

 new Vue({
  el: "#app",
  data: {
    slider:[
     { name: "slide 1", cards: [{name:'card1'}], },
     { name: "slide 2", cards: [{name:'card2'}] }    
    ]
  },
  mounted(){
    window.setInterval(()=>this.rollSlide(),2000)
  },
  methods: {
  	rollSlide(){
    	this.slider.push(this.slider.shift())
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
  <div id="app">
    <div id="button-toggle-container" class="button-toggle-container flex justify-center justify-between mt3 mb4 mx-auto">
      <button class="button-toggle" v-for="(slide, index) in slider" :key="index">{{ slide.name }}</button>
    </div><!--/toggle-button-container-->
      <div class="slide flex flex-wrap" >
<transition-group name="slide-fade" class="slide-fade-transition flex" tag="div">

        <div class="flex sm-col-12 md-col-12 lg-col-4 border-box" v-for="(card, index) in slider[0].cards" :key="index">
          <a href="/" class="card-primary slide-card-primary p3 block mx-auto">
            <div class="card-primary-image">
              <img class="fit" :src="card.image" height="auto" />
            </div>
            <div class="card-primary-content">
              <h3 class="mt2">{{ card.name  }}</h3>
            </div>
            <div class="button-container center">
              <button class="button-primary mx-auto">View</button>
            </div>
          </a>
        </div>
</transition-group>
</div>

v-for中的VueJS切换幻灯片面板

1 个答案: