V-for 在 1 行中，中间有一些东西

问题描述

我试图在 1 行中显示一个带有 v-for 的数组，该数组正在工作，但我想在每个单词之间添加“,”。唯一的问题是，当我这样做时，它也会以“,”结尾。有什么建议吗？

解决方法

.join() 使用指定的 "glue" 连接字符串（在本例中为 comma + space）：

new Vue({
  el: '#app',data: () => ({ 
    items: ['apple','banana','cherry']
  }),computed: {
    displayItems() {
      return this.items.join(',');
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  Items: {{ displayItems }}
</div>

人们甚至可以争辩说，鉴于这是一个非常简单的案例，您不应该为 computed 烦恼：

new Vue({
  el: '#app','cherry']
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  Items: {{ items.join(',') }}
</div>

如果你真的想使用标签，你可以使用CSS伪元素来解决问题：

new Vue({
  el: '#app','cherry']
  })
})

#app > span:after {
  content: ','
}
#app > span:last-child:after {
  content: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  Items: <span v-for="(item,key) in items" :key="key" v-text="item"/>
</div>

,

将逗号放在 <template> 中并检查它是否是最后一项

<template>
  <div>
    <span v-for="(item,index) of items" :key="i">
      {{item}}<template v-if="index !== items.length - 1">,</template>
    </span>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: ['test A','test B','test C']
      }
    }
  }
</script>