主页 / coding / 问题 / 78380882
Accepted
timbre timbre
Asked: 2024-04-25 03:45:36 +0800 CST

Tailwind 的 div-y 与 Vue3 的 v-for

  • 772

我正在尝试将 Tailwind应用于使用Vue3divide创建的 div ：v-for

<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循环中的项目吗？任何能产生相同效果的替代方案都可以。谢谢

vue.js

1 个回答

  1. Best Answer

    这些divide-y-*类的设计使得它们位于应划分的元素的父级上。因此，您可以将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>

    • 1

相关问题