Vue v-for指令无法呈现正确的html

问题描述

我有一个需要转换为动态Vue组件的html模型。

我的问题是关于v-for指令来渲染正方形的嵌入式div。我不明白为什么它不能在纯HTML和v-for循环之间呈现相同的效果=>请参见下面的代码段
但是，当我检查代码时，它看起来完全一样：

我想知道为什么会出现这种差异，以及是否可以使用v-for指令获得相同的结果而无需添加边距或填充或任何CSS技巧。

new Vue({
  el: "#app"
})

.red-square {
  background-color: #dc3545;
  height: 10px;
  width: 10px;
  display: inline-block;
  margin: 0;
  border: 0;
}

.container {
  width: 200px;
}

<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>

<div id="app">
  <div>With v-for</div>
  <div class="container">
    <div v-for="i in 5" class="red-square"></div>
  </div>
  <br>
  <div>With plain html</div>
  <div class="container">
    <div class="red-square"></div>
    <div class="red-square"></div>
    <div class="red-square"></div>
    <div class="red-square"></div>
    <div class="red-square"></div>
  </div>
</div>

解决方法

在使用inline-block作为显示属性值时，当使用div进行换行时，它会在div之间呈现空白：

<div></div>
<div></div>
<div></div>

，但是当它们在同一行中写入时，它将删除空格：

<div></div><div></div><div></div>

v-for指令如何呈现div从而删除该空间。

html v-for vue.js