Vue v-for 指令不呈现正确的 html答案

【问题标题】：Vue v-for directive not renders the right htmlVue v-for 指令不呈现正确的 html
【发布时间】：2020-10-11 11:04:55
【问题描述】：

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

我的问题是关于 v-for 指令来呈现正方形的内联 div。我不明白为什么它在普通 html 和 v-for 循环之间呈现不一样 => 请参阅下面的 sn-p
但是，当我检查代码时，它看起来完全一样：

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

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>

【问题讨论】：

你忘了附上sn-p
@DavidGo 他提供它只需点击 Run code sn-p 即可查看输出
啊，我用的是手机版，那里没有这个功能

标签： html css vue.js vuejs2 v-for

【解决方案1】：

当使用inline-block 作为显示属性值时，当使用换行符编写 div 时，它会在 div 之间呈现一个空格，例如：

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

但是当它们写在同一行时它会删除空格，如下所示：

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

这是 v-for 指令如何呈现删除该空间的 div。

【讨论】：