javascript - 如何在每两个 v-for 生产标签之间插入一个新标签？

Question

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

背景:

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

<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>

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

感谢回复。

Answer 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;
}