vue.js - 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>

您会看到它们之间的一些空间很棒。

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

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

更新:h1 标签发生了同样的事情!

这是一个解释得很好的 fiddle : https://jsfiddle.net/fbp1yhyu/2/

Answer 1

这是因为您的原始示例在两个图像之间有一个空白字符(换行符和制表符)，但是 Vue 没有在 v-for 的 img 之间放置一个空白字符。

原始标记:

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

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

<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元素是 sibling ，而 vue 代码有第二个 h1不是第一个 h1 的 sibling 因为它在一个 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>