如何在Vue.js 3中以列状形式展示列表？

列表含1个项 #

<div class="container">
  <div class="row">
    <div class="col-sm-12">item 1</div>
  </div>
</div>

列表含2个项 #

<div class="container">
  <div class="row">
    <div class="col-sm-6">item 1</div>
    <div class="col-sm-6">item 2</div>
  </div>
</div>

列表含3个项 #

<div class="container">
  <div class="row">
    <div class="col-sm-4">item 1</div>
    <div class="col-sm-4">item 2</div>
    <div class="col-sm-4">item 3</div>
  </div>
</div>

列表含4个及以上项 #

逻辑与3个项一致，仅需新增行：

• 4个项目 ÷ 3 = 使用2行
• 8个项目 ÷ 3 = 使用3行

内容的提问来源于stack exchange，提问作者mrjayviper