如何在每两个 v-for 生成的标签之间插入一个新标签？答案

【问题标题】：How to insert a new tag between every two v-for produced tags?如何在每两个 v-for 生成的标签之间插入一个新标签？
【发布时间】：2018-12-30 03:45:40
【问题描述】：

有没有办法可以在每两个 v-for 生成的标签之间插入新标签？喜欢Array.join()。

背景：

我想在每两个<router-link></router-link> 之间插入一个<span>,</span>。

<router-link></router-link>由v-for产生，代码如下：

<router-link tag="a" 
             v-for="text in ['vue', 'react', 'JQuery']"
             :key="text"
>
  {{ text }} &nbsp;
</router-link>

运行它，看起来像这样：

vue react JQuery

我不知道如何在它们之间直接插入<span>,</span>，所以我把它移到<div>：

<div v-for="text in ['vue', 'react', 'JQuery']"
     :key="text">
   <router-link tag="a">
    {{ text }}
  </router-link>
  <span>,&nbsp;</span>
</div>

运行它，看起来像这样：

vue, react, JQuery,

所以问题是最后一个“，”是多余的。我可以通过v-show修复它：

<div v-for="(text, index) in ['vue', 'react', 'JQuery']"
     :key="text">
   <router-link tag="a">
    {{ text }}
  </router-link>
  <span v-show="index !== 2">,&nbsp;</span>
</div>

效果很好，但我想知道有没有简单的方法可以做到这一点？

感谢回复。

【问题讨论】：

标签： javascript html css vue.js

【解决方案1】：

您的最后一种方法是可行的方法，但您可能应该使用Array.length 来处理最后一次出现的事件，以防数组发生变化。

<span v-show="index !== (items.length - 1)">,&nbsp;</span>

或者使用纯 CSS（注意我在 div 元素上添加了 route 类）：

div.route:not(:last-child) > a::after {
  content: ',';
  text-decoration: none;
}

【讨论】：

是的，上面的代码只是一个例子。我在实际案例中使用Array.length。感谢您的 CSS 解决方案。

【解决方案2】：

作为对jom 所说的补充：我宁愿使用v-if 而不是v-show，因为正如docs 所说：

如果您需要经常切换某些东西，首选v-show，如果条件不太可能在运行时改变，首选v-if。

由于您不想在任何时候切换逗号，所以根本不要渲染它:)

【讨论】：

【解决方案3】：

已经说过的另一个补充。颠倒顺序更容易避免多余的逗号（你总是跳过第一个，而不是需要照顾数组长度）

<div v-for="(text, index) in ['vue', 'react', 'JQuery']"
     :key="text">
  <span v-if="index !== 0">,&nbsp;</span>
   <router-link tag="a">
    {{ text }}
  </router-link>
</div>

【讨论】：