在 v-for 循环中显示 VUE.JS

Question

我在 Vue.js Vue 页面中有一个 v-for 循环，它创建超链接并且代码工作正常，但位置是每个项目都低于最后一个。 如果可能的话，我想将这些值放在水平线上，它们之间用逗号分隔。

             <div v-for="objGrant 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' >{{ objGrant.GrantID }}</a></b>                
              </div>

我这样做的方式可能吗？

Answer 1

您可以通过使用带有值inline或inline-block的 CSS 属性display来简单地实现这一点。

现场演示：

 new Vue({ el: '#app', data: { obj: { GrantListData: [{ NCI_GrantList: 1, GrantID: 123 }, { NCI_GrantList: 2, GrantID: 456 }, { NCI_GrantList: 3, GrantID: 789 }] } } })

 div { display: inline-block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="(objGrant, index) in obj.GrantListData":key="objGrant.NCI_GrantList"> <b><a class="nav-link" v-bind:href="''">{{ objGrant.GrantID }}</a></b> <span v-if="index < obj.GrantListData.length - 1">, </span> </div> </div>

Answer 2

尝试在包装器 div 上设置display: flex ：

 new Vue({ el: '#demo', data() { return { obj: {GrantListData: [{NCI_GrantList: 1, GrantID: 1}, {NCI_GrantList: 2, GrantID: 2}, {NCI_GrantList: 3, GrantID: 3}]} } } })

 .list { display: flex; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo" class="list"> <div v-for="(objGrant, i) 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' > {{ objGrant.GrantID }} </a> </b> <span v-if="i < obj.GrantListData.length - 1">,</span> </div> </div>