Vue.js中v-for遍历数组时如何仅在非末尾单词后添加分号分隔符

方案1：索引判断（保留单元素独立标签结构） #

通过遍历拿到的索引判断当前项是否为数组最后一项，仅非最后一项追加分号即可，完全适配你当前的写法：

<span v-for="(item, itemIndex) in arrayOfStrings"
     :key="itemIndex"
     v-html="item + (itemIndex !== arrayOfStrings.length - 1 ? ';' : '')" />

原理：数组最后一个元素的索引固定为数组长度 - 1，匹配到最后一项时不拼接分号，从根源避免多余符号。

方案2：数组原生join方法（无单元素样式需求时优先使用） #

如果不需要给每个字符串单独包裹span做独立样式控制，直接用Array.prototype.join()是最简洁高效的写法，join本身就只会在元素之间插入分隔符，不会在末尾追加内容：

<span v-html="arrayOfStrings.join(';')"></span>

这种写法只会渲染1个span节点，DOM开销更小。

方案3：CSS伪元素控制（逻辑与模板解耦场景使用） #

如果不想在模板里写判断逻辑，可以把分隔符渲染交给CSS处理：
模板部分去掉分号拼接，统一加类名：

<span v-for="(item, itemIndex) in arrayOfStrings"
     :key="itemIndex"
     class="tag-item"
     v-html="item" />

CSS部分控制分隔符：

.tag-item::after {
  content: ";";
  margin: 0 2px; /* 还可以很方便的给分隔符加间距、改颜色 */
  color: #999;
}
.tag-item:last-child::after {
  content: "";
}

后续要调整分隔符样式时不需要修改业务模板代码，维护成本更低。

内容的提问来源于stack exchange，提问作者Maxime