v-for 删除 bulma 中的边距

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 时，像 nth child 这样的 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>