Question

例如我有像这样的简单数字

<figure>
<img src="https://bulma.io/images/placeholders/128x128.png">
<img src="https://bulma.io/images/placeholders/128x128.png">
<figcaption>
Some Caption
</figcaption>
</figure>

你看到一些空间很大。

现在，当我想使用vue显示图像并用v-for显示图像时，那些边距就消失了......

有谁知道为什么？我认识到当我应用vue和v-for时，像第n个孩子这样的css选择器不再起作用了......但是我不知道如何解决这个......

更新：同样的事情发生在h1标签上！

这是一个小提琴，解释它也非常好： https://jsfiddle.net/fbp1yhyu/2/

Answer 1

这是因为您的原始示例在两个图像之间有一个空格（新行和制表符）字符，但是Vue没有在v-for中的imgs之间放置一个空格字符。

原始标记：

<img ...> <img ...>

使用<img v-for="..." src="...">生成的VueJS标记：

<img ...><img ...>

以下代码将空间重新添加，但是它的空间稍大。这是一个白色空间角色。希望这有帮助！

<template v-for="image in garden.images">
      <img :src="image">&nbsp;
</template>

您可以通过删除第一张图片后的新行，在没有vue的情况下在原始标记中重现相同的问题：

<img src="https://bulma.io/images/placeholders/128x128.png"><img src="https://bulma.io/images/placeholders/128x128.png">

h1标记问题

似乎是由于以下css。原始代码有2个h1元素是兄弟，而vue代码有第二个h1不是第一个h1的兄弟，因为它在div中。

CSS（在bulma中定义）

.content h1:not(:first-child) {
    margin-top: 1em;
}

原始HTML：

<h1>Bulma without VUE</h1>
<h1>Project 1</h1>

Vue Html：

<h1>Bulma with VUE</h1>
<div v-for="garden in gardens">
    <h1>{{garden.name}}<h1>
    ...
</div>

v-for删除了bulma中的边距

1 个答案: