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> 

标签： javascriptvue.js

Answer 1

很容易。基于索引的条件渲染。与此类似的东西应该可以工作：

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