如何在vue中，给用for遍历出来的每一项div添加不同的过度动画

如何在vue中，给用for遍历出来的每一项div添加不同的过度动画

if判断即可

<template>
  <div>
    <div v-for="item in list" :class="item.className" :key="item.name">
      {{ item.name }}
    </div>
  </div>
</template>
<script>
export default {
  name: "demo",
  data() {
    return {
      list: [
        { name: 1, className: "动效类名1" },
        { name: 2, className: "动效类名2" },
      ],
    };
  },
};
</script>

1、可以用索引，如

div:nth-child(1){} 
div:nth-child(2){}

2、循环的时候加个不同的class ,如

<div v-for=“item in list” :class="item.className"></div>