数组对象根据某属性拼接

最新推荐文章于 2024-03-04 09:30:22 发布

longlongfishday

最新推荐文章于 2024-03-04 09:30:22 发布

阅读量774

点赞数

分类专栏： vue JQ 前端

本文链接：https://blog.csdn.net/m0_37715455/article/details/117284533

版权

前端同时被 3 个专栏收录

26 篇文章 0 订阅

订阅专栏

14 篇文章 0 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

本文展示了如何在Vue.js中通过方法处理后台返回的数组对象，将每个对象的特定属性拼接成带有前缀的字符串。通过定义`dataComb`方法，可以实现动态添加前缀并在字符串末尾添加分隔符的功能。示例中，`test1`显示'包含test1、test2'，而`test2`直接显示'test1、test2'。

摘要由CSDN通过智能技术生成

问题：

后台返回数组对象，想要把每个对象某个属性拼接成字符串显示，可在字符串前添加文字

数据：

	TESTdataComb:[
		{
			test:'test1'
		},
		{
			test:'test2'
		}
	]

结果展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="./js/vue.js"></script>
		<style>
		</style>
	</head>
	<body>
		<div id="app">
		    <div class="main-box">
				<div id="test1">
					{{dataComb(this.TESTdataComb,'test','包含')}}
				</div>
				<div id="test2">
					{{dataComb(this.TESTdataComb,'test')}}
				</div>
		    </div>
		</div>
	</body>
	<script>
		const app = new Vue({
		    el: "#app",
		    data:{
				TESTdataComb:[
					{
						test:'test1'
					},
					{
						test:'test2'
					}
				]
		    },
		    methods: {
				dataComb:function(itarr, retstr, firstr){
					let tmp = ''
					if (retstr) {
						//取item某个属性值的时候
						itarr.map((it, idx) => {
							if (idx == 0 && firstr) {
								tmp = firstr
							}
							tmp += idx == itarr.length - 1 ? it[retstr] : it[retstr] + '、'
						})
					} else {
						tmp = itarr.join('、')
					} 
					return tmp
				}
		    },
		});
	</script>
</html>