Vue渲染数组时实现最后一项不加逗号

作者：代码拾荒

时间：2026-10-30

本文介绍在Vue项目中处理后端返回列表数据时，如何在每个元素后添加逗号但最后一项不显示的技巧。通过利用map循环遍历数组，对非最后项拼接逗号，实现表格项鼠标悬停提示时的格式要求。

文章目录

在数组元素后添加逗号，最后一个元素不添加

近期开发需求：后端返回列表需在每个数组元素后加逗号，最后一个元素不加，此场景用于表格中鼠标悬停某一项时显示该项目的详细信息提示

代码实现

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>js实现数组渲染时，在每个值后面加逗号，最后一个值不加</title>
  <!--引入 element-ui 的样式，-->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  <!-- 引入element 的组件库-->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #app {
      margin: 100px;
    }
  </style>
</head>
<body>
  <div id="app">
    <span v-for="(item, index) in arr" :key="index">{{item}}</span>
  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          // 模拟后端返回的数组
          arr: [
            "测试1",
            "测试2",
            "测试3",
            "测试4",
            "测试5"
          ],
        }
      },
      created() {
        this.arr = this.arr.map((item, index) => {
          // 最后一个值不加
          if (index !== this.arr.length - 1) {
            return item + '， '
          }
          return item
        })
        console.log(this.arr, 'arr')
      },
      methods: {
      }
    })
  </script>
</body>
</html>