14

在内联元素上使用 v-for 循环遍历数组（或对象）时，vuejs 不会在所述元素周围呈现空白。

例如，我有这个 html：

<div id="app">
    Vue Rendering<br>
    <a v-for="fruit in fruits" v-bind:href="fruit.url" v-html="fruit.label"></a>

    </div>
    <div>
    Navite rendering<br>
    <a href="apple.html">Apple</a>
    <a href="banana.html">Banana</a>
    <a href="peach.html">Peach</a>
</div>

这个javascript：

var fruits = [
    {
        label: 'Apple',
        url: 'apple.html'
    },
    {
        label: 'Banana',
        url: 'banana.html'
    },
    {
        label: 'Peach',
        url: 'peach.html'
    }
];

var app = new Vue({
    el: '#app',
    data: {
        fruits: fruits
    }
});

当 Vue 渲染它时，它会删除链接之间的空格。看到这个 jsfiddle。

我该如何应对这种行为？

4

3 回答 3

11

来自关于列表渲染的文档>v-for<template>

与 template 类似v-if，您也可以使用<template>标签 withv-for来渲染一个包含多个元素的块。例如：

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

因此，为了获得兄弟元素（是的，分隔空格字符&#32;将计为一个），您必须将循环添加到父<template>容器，然后在循环内容中包含您想要的任何元素/间距，如下所示：

<template v-for="fruit in fruits" >
  <span>{{fruit}}</span>&#32;
</template>

从 Vue 2.x+ 开始，模板会修剪任何分隔空格字符，即使它们被转义。

相反，您可以像这样添加插槽或文本插值：

<template v-for="fruit in fruits" >
  <span>{{fruit}}</span><slot> </slot>
</template>
<template v-for="fruit in fruits" >
  <span>{{fruit}}</span>{{ ' ' }}
</template>

如果您只想要元素之间的空格，则可以有条件地输出空格：

<template v-for="(fruit, i) in fruits" >
  <span>{{fruit}}</span>{{ i < fruits.length -1 ? ', ': '' }}
</template>

堆栈片段中的演示

var app = new Vue({
    el: '#app',
    data: {
        fruits: ["apple", "banana", "carrot"]
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0/vue.js"></script>

<div id="app">
    <template v-for="(fruit, i) in fruits" >
      <span>{{fruit}}</span>{{ i < fruits.length -1 ? ', ': '' }}
    </template>
</div>

进一步阅读：
Issue #1841 -建议：v-glue / v-for element joins

于 2018-12-02T21:19:42.347 回答
2

我有一个案例，我需要将字符串的每个字符（包括空格）包装在 a 中<span>并以这种方式解决它。

<template v-for="(letter, i) in 'My text with spaces'">
    <span v-if="letter !== ' '">{{ letter }}</span>
    <span v-else>&nbsp;</span>
</template>
于 2019-08-29T22:52:45.850 回答
0

您可以使用 CSS：

<a v-for="fruit in fruits" v-bind:href="fruit.url" v-html="fruit.label" 
   style="margin-right: 5px;"></a>
于 2018-01-24T19:35:59.083 回答