Блог

У меня есть html-макет, который мне нужно преобразовать в динамический компонент Vue.

Моя проблема связана с v-for директивой для отображения встроенных divs квадратов. Я не понимаю, почему он не отображает то же самое между обычным html и v-for loop => см. Фрагмент ниже
, однако, когда я проверяю код, он выглядит точно так же:

Я хотел бы знать, почему эта разница и могу ли я получить тот же результат с 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>
  

так директива v-for отображает divs, который удаляет это пространство.