Как вставить новый тег между каждыми двумя созданными тегами 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

Как дополнение к тому, что Джом сказал: я бы лучше использовал v-if, чем v-show, потому что в качестве документов говорят:

предпочитайте v-show, если вам нужно что-то переключать очень часто, и предпочитайте v-if, если условие вряд ли изменится во время выполнения.

Поскольку вы не хотите переключать запятую в любой точке, просто не рендерится вообще:)

Answer 2

Еще одно дополнение к тому, что уже было сказано.Инвертирование порядка позволяет избежать ненужной запятой (вы всегда пропускаете первую, вместо того, чтобы заботиться о длине массива)

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

Answer 3

Ваш последний подход - путь, но вам, вероятно, следует использовать 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;
}