我可以在不使用 ul 或 ol 的情况下使用 Vue v-for

Question

我是 Vue 的新手。我想显示一些数据行，但我不想要数字 (ol) 或项目符号 (ul)。下面有替代我的方法吗？

<li v-for="product in contract.products">
  <div class="p-1 row">
    <div class="col-4">
      <strong>{{ product.productName }}</strong>
    </div>
    <div class="col-4">
      Allocation: {{ product.allocation }}
    </div>
    <div class="col-4">
      Fulfilled:  {{ product.allocationFulfilled }}
    </div>
  </div>
</li>

非常感谢。

Answer 1

虽然示例v-for通常使用<li>，但您实际上可以在要重复的任何元素v-for上使用该指令。因此，您可以将标记更改为：

<div class="p-1 row" v-for="product in contract.products">
  <div class="col-4">
    <strong>{{ product.productName }} </strong>
  </div>
  <div class="col-4">
    Allocation: {{ product.allocation }}
  </div>
  <div class="col-4">
    Fulfilled:  {{ product.allocationFulfilled }}
  </div>
</div>