javascript - 使用 "+"连接/连接模板元素

Question

有没有办法连接模板元素？我有这个模板，它是一个循环，但我不知道如何连接/加入多个项目。如果我放置 +里面<kbd>标签，我得到一个额外的 +在最后，它位于 kbd 标签内(我希望在标签之外)。

<template>
  <kbd v-for="(v, i) in item" :key="i">{{ v }}</kbd>
</template>

我正在使用的数据看起来像这样(我实际上正在使用商店):

data: () {
  return {
    item: [ 'a', 'b', 'c' ]
  }
}

我正在寻找的结果是:

<kbd>a</kbd> + <kbd>b</kbd> + <kbd>c</kbd> 

Answer 1

很简单。基于索引的条件渲染。类似的东西应该可以工作:

<template v-for="(v, i) in item">
  {{i > 0 ? ' + ' : ''}}<kbd :key="i">{{ v }}</kbd>
</template>