Question

查看使用vue-component渲染的红色标签。他们假设与绿色标签一样，用刀片模板渲染。为什么会有区别？

刀片模板：

<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

您可以使用&NewLine; HTML实体，例如：

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

Answer 2

将标签CSS从“display：inline”更改为“display：inline-block”。

Answer 3

对此的实际解释很奇怪：

当您输入HTML时，按“输入”/“返回”以在每个<span>元素之后创建一个新行（如果愿意，可以插入一个不可见的字符）。

对于使用Vue构建的元素（或者通常用于JavaScript），返回不存在，因此不会插入尾随空格。

Chris Coyier在this article中雄辩地描述了空间移除的选项。

解决方案是覆盖标签的Bootstrap CSS：

.label {
  display: inline-block;
}

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

3 个答案: