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 （请注意，我在route元素上添加了div类）：

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

Answer 2

除了jom所说的以外：我宁愿使用v-if而不是v-show，因为正如docs所说的那样：

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

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

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

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

背景：

3 个答案: