最近在开发一个功能：后端返回的列表要求每一个数组元素后面加一个逗号，最后一个数组元素不加,该场景是用在表格中，鼠标移入某一个表格项，toast提示那一项的详细，下面是代码：
<!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>效果：
主要原理就是利用map循环，给每一个item拼接一个逗号，但是需要在拼接前面加一个该item不是最后一个的判断,最后return改造后的item
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。