如何用v-for遍历生成标签的同时,根据index给标签设置不同的transition-delay属性
时间: 2023-05-11 09:04:56 浏览: 109
Vue.js 利用v-for中的index值实现隔行变色
可以使用以下代码实现:
<template>
<div>
<div v-for="(item, index) in items" :key="index" :style="{ transitionDelay: `${index * 0.1}s` }">
{{ item }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: ['item1', 'item2', 'item3', 'item4', 'item5'],
};
},
};
</script>
在上面的代码中,我们使用了v-for指令来遍历items数组,并使用index来设置每个标签的transition-delay属性。我们将transitionDelay属性设置为`${index * 0.1}s`,其中0.1是每个标签之间的延迟时间,可以根据需要进行调整。
阅读全文