v-for 删除 bulma 中的边距

Question

例如我在bulma中有一个像这样的简单图形

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

你看到一些 space 两者之间很棒。

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

有人知道为什么吗？当我应用 vue 和 v-for 时，我意识到 css 选择器像 nth child 不再工作了......但我不知道如何解决这个......

update: h1标签也一样！

这里有一个fiddle解释也很好： https://jsfiddle.net/fbp1yhyu/2/

Answer 1

这是因为您的原始示例在两个图像之间有一个白色 space（换行符和制表符）字符，但是 Vue 没有在 v 中的 img 之间放置一个白色 space 字符-for.

原始标记：

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

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

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

下面的代码添加了 space，但是它稍微大了一点 space。是一个白色 space 字符。希望这对您有所帮助！

<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 中的边距

v-for removes margins in bulma

margin

vue.js

vuejs2

bulma