用“+"连接/加入模板元素 [英] Concatenate/Join Template Elements with a "+"

问题描述

有没有办法连接模板元素?我有这个模板，它是一个循环，但我不知道如何连接/连接多个项目.如果我将 + 放在 <kbd> 标签内，我会在最后得到一个额外的 + 并且它在 kbd 标签内(我想在标签之外).

Is there a way to concatenate template elements? I have this template, which is a loop, but I can't figure out how I can concatenate/join multiple items. If I place the + inside the <kbd> tag, I get an extra + at the end and it is within the kbd tag (which I would like outside of the tag).

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

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

The data I am using looks something like this (I am actually using a store):

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

我要找的结果是:

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

推荐答案

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

Easy enough. Conditional rendering based on index. Something similar to this should work:

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

这篇关于用“+"连接/加入模板元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！