我可以在不使用 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>，但您实际上可以在 any 上使用 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>

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

Can I use Vue v-for without using either ul or ol

vue.js

bootstrap-4

v-for