Vue.js中如何将v-for循环生成的链接改为水平排列并添加逗号分隔？

当前的实现可以调整后满足你的需求，不用重构核心逻辑，只需要修改样式加逗号判断即可：

1. 实现水平排列
   你现在每个链接都包裹在<div>里，div默认是块级元素，所以会垂直换行。可以通过两种方式调整：

• 方式一：给循环的div添加行内块样式

  <div v-for="(objGrant, index) in obj.GrantListData" :key="objGrant.NCI_GrantList" style="display: inline-block; margin-right: 4px;">
    <b><a class="nav-link" @click.prevent="load_NIH_Reporter(objGrant.GrantID)" v-bind:href="" aria-label='Support' style="display: inline;">{{ objGrant.GrantID }}</a></b>
    <!-- 条件渲染逗号 -->
    <span v-if="index < obj.GrantListData.length - 1">, </span>
  </div>
  

  注意nav-link类默认可能是display:block，所以给a标签加display:inline覆盖，避免独占一行。

• 方式二：外层套flex容器（更推荐）
  在外层加一个flex容器，不用修改每个div的样式，布局更灵活：

  <div style="display: flex; gap: 4px; align-items: center;">
    <div v-for="(objGrant, index) in obj.GrantListData" :key="objGrant.NCI_GrantList">
      <b><a class="nav-link" @click.prevent="load_NIH_Reporter(objGrant.GrantID)" v-bind:href="" aria-label='Support' style="display: inline;">{{ objGrant.GrantID }}</a></b>
      <span v-if="index < obj.GrantListData.length - 1">, </span>
    </div>
  </div>
  

2. 添加逗号分隔
   利用v-for的第二个参数index，判断当前元素是否为最后一项，不是的话就渲染逗号，避免最后一项末尾多出来逗号。

如果你想简化结构，也可以直接循环<a>标签，去掉多余的div：

<div style="display: flex; gap: 4px; align-items: center;">
  <b v-for="(objGrant, index) in obj.GrantListData" :key="objGrant.NCI_GrantList">
    <a class="nav-link" @click.prevent="load_NIH_Reporter(objGrant.GrantID)" v-bind:href="" aria-label='Support' style="display: inline;">{{ objGrant.GrantID }}</a>
    <span v-if="index < obj.GrantListData.length - 1">, </span>
  </b>
</div>

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