Tailwind 的 split-y 与 Vue3 的 v-for

Question

我正在尝试将 Tailwind 的

divide

应用于使用 Vue3 的

v-for

创建的 div：

<div v-for="(i) in [1, 2, 3]" class="divide-y divide-red-400">
  <div>{{ i }}</div>
</div>

但没有应用分隔线：

我希望看到这个：

（注意：此图像是使用相同的父 div 的

class

创建的，但没有

v-for

循环，只需静态添加子 div）

那么有没有办法将分隔符应用于

v-for

循环中的项目？任何能产生相同效果的替代方案都可以。谢谢

Answer 1

divide-y-*

类的设计使得它们位于应划分元素的parent上。因此，您可以将

divide-y-*

类添加到具有

v-for

指令的元素的父级。这是因为具有

v-for

指令的元素会被重复：

Vue.createApp().mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.25/vue.global.prod.min.js" integrity="sha512-sT2a1EG7Kmio5Wia95orR00Ar8F78KIVv/AHrV0998mocqYsjoG2YiYCARXrXdaMog05zYTrtaVG3+uW4UhVEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div id="app" class="divide-y divide-red-400">
  <div v-for="(i) in [1, 2, 3]">
    <div>{{ i }}</div>
  </div>
</div>