使用vue-component时引导标签显示问题

Question

屏幕

看看红色标签，用vue组件呈现。他们应该和绿色标签一样，用刀片模板渲染。为什么会有区别？

刀片模板：

<div class="col-sm-2">

    <span class="label label-success">good badge 1</span>
    <span class="label label-success">good badge 2</span>
    <span class="label label-success">good badge 3</span>
    <span class="label label-success">good badge 4</span>
    <span class="label label-success">good badge 5</span>

    <badge-list></badge-list>

    <span class="label label-success">good badge 6</span>
    <span class="label label-success">good badge 7</span>

</div>
<div class="col-sm-10">
    some text</br>
    some text</br>
    some text</br>
    some text</br>
    some text</br>
    some text</br>            
</div>

Vue-组件：

<template>
    <span  v-for="Badge in Badges" class="label label-danger">{{ Badge.name }}</span>
</template>

<script>
export default {
  data () {
    return {
      Badges: [
        {"name": "bad badge 1"}, 
        {"name": "bad badge 2"}, 
        {"name": "bad badge 3"}, 
        {"name": "bad badge 4"}, 
        {"name": "bad badge 5"},
      ],
    };
  },
};
</script>

Answer 1

对此的实际解释是奇怪的：

键入HTML时，按“enter”/“return”键，在每个<span>元素之后创建一个新行(如果愿意，它将插入一个不可见字符)。

对于使用Vue构造的元素(或者一般情况下是JavaScript )，返回不存在，因此不会插入尾随空间。

Coyier雄辩地描述了在这篇文章中删除空间的选项。

解决方案是重写标签的引导CSS：

.label {
  display: inline-block;
}

Answer 2

您可以使用
 HTML实体，如下所示：

<template v-for="Badge in Badges">
    <span class="label label-danger">{{ Badge.name }}</span>&NewLine;
</template>

Answer 3

将标签CSS从“显示:内联”更改为“显示:内联块”。