vue页面渲染数组中数据文案后添加逗号最后不加
更新时间：2023年08月03日 10:59:45 作者：我的一个道姑朋友
这篇文章主要为大家介绍了vue页面渲染数组中数据文案后添加逗号最后不加逗号示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
数组元素后面加一个逗号，最后一个数组元素不加
最近在开发一个功能：后端返回的列表要求每一个数组元素后面加一个逗号，最后一个数组元素不加,该场景是用在表格中，鼠标移入某一个表格项，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
以上就是vue页面渲染数组中数据文案后添加逗号最后不加的详细内容，更多关于vue页面渲染数据加逗号的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要给大家介绍了关于如何利用Vue实现简易播放器的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
vue利用better-scroll实现轮播图与页面滚动详解
在我们日常的项目开发中，处理滚动和轮播图是再常见不过的需求了，下面这篇文章主要给大家介绍了关于vue利用better-scroll实现轮播图与页面滚动的相关资料，文中给出了详细的示例代码供大家参考学习，需要的朋友们下面来一起看看吧。2017-10-10
vue中的attribute和property的具体使用及区别
本文主要介绍了vue中的attribute和property的具体使用及区别，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
在本文中我们给大家整理了关于Vue项目服务器部署之子目录部署方法和具体步骤，需要的朋友们参考下。2019-05-05
最近搭建一个Springboot+vue前后端分离项目,真的很简单,下面这篇文章主要给大家介绍了关于如何在Vue和Spring boot之间实现前后端连接的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
el-elementUI使用el-date-picker选择年月
本文主要介绍了el-elementUI使用el-date-picker选择年月,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2024-02-02
Webpack+Vue如何导入Jquery和Jquery的第三方插件
本文主要介绍了Webpack+Vue导入Jquery和Jquery的第三方插件的方法，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
这篇文章主要介绍了关于Ant-Design-Vue快速上手指南+排坑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
解决Vue项目Network: unavailable的问题
项目只能通过Local访问而不能通过Network访问,本文主要介绍了解决Vue项目Network: unavailable的问题,具有一定的参考价值,感兴趣的可以了解一下2024-06-06
最新评论