如何在不同时间渲染 v-for 循环中的元素？

Question

使用 v-for 循环，我想显示以特定间隔循环的数组元素。比如我循环的数组第一个元素应该在100ms后显示，第二个元素200ms后显示，第三个元素300ms后显示。我该如何解决这个问题？

Answer 1

您可以通过使用 setTimeout 并根据索引动态传递超时来实现。

工作演示：

const app = new Vue({
  el: '#app',
  data() {
    return {
      list: [{
        isFlag: false
      }, {
        isFlag: false
      }, {
        isFlag: false
      }]
    }
  },
  mounted() {
    this.list.forEach((obj, index) => {
      setTimeout(() => {
         obj.isFlag = true
      }, 100 * (index + 1));
    })
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="(item, index) in list" :key="index">
      {{item.isFlag}}
    </li>
  </ul>
</div>

Answer 2

我找到了一种方法来完成我想要的，希望这对您有所帮助。

const app = new Vue({
  el: '#app',
  data() {
    return {
      itemArr: []
    }
  },
  mounted() {
    let items = [
      {
        title: "item1" 
      },
      {
        title: "item2"
      },
      {
        title: "item3"
      }
    ]
   
   items.forEach((item,index) => {
    setTimeout(()=>{
      this.itemArr.push(item)
    }, 100*(index+1))
   })
    
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
  <div class="main">
    <div class="fade-in-fwd" v-for="item in itemArr" :key="item.title">
      {{item.title}}
    </div>
  </div>
</div>

<style>
  .main {
    display: flex;
    gap: 10px;
  }
  
  @-webkit-keyframes fade-in-fwd {
    0% {
      -webkit-transform: translateZ(-80px);
      transform: translateZ(-80px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      opacity: 1;
    }
  }
  
  @keyframes fade-in-fwd {
    0% {
      -webkit-transform: translateZ(-80px);
      transform: translateZ(-80px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      opacity: 1;
    }
  }
  
  .fade-in-fwd {
    -webkit-animation: fade-in-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  }
</style>

如何在不同时间渲染 v-for 循环中的元素？

How can I render elements in v-for loop with different times?

animation

vue.js

v-for