vue遍历对象中的数组取值示例

前几天小项目,没考虑周全,让后端改接口,改成数组中包含对象中包含数组的形式,后来越琢磨越不对,后台把所有数据放在了一个对象里,我拿弹窗数据不好拿,索性又改了回来,把后端折腾够呛,自己也折腾够呛,发上来,以示警戒

改前拿数据

<div class='your-container'>
		<div class="sortText">
			<div>综合排序</div>
			<div class="sortHot" @click="mostHot"><p>最热</p><div class="sortImg"><img src="../../assets/imgs/mosthot.png" alt=""></div></div>
			<div class="sortHot" @click="mostNew"><p>最新</p><div class="sortImg"><img src="../../assets/imgs/mostview.png" alt=""></div></div>
			<div class="adhibition" @click="adhibition(0)">应用</div>
			<div class="adhibition" @click="adhibition(1)">算法</div>
		</div>
		<!-- bind your configurations -->
		<vue-scroll :ops="ops">
					<div class='your-content'>
							<ul class="listBox" @handle-resize="handleResize">
								<li v-for="(item,index) in list" :key="index" class="lis">
										<div class="listIcon">
											<img src="../../assets/imgs/jicon.png" alt="">
										</div>
										<div class="listText">
											<div class="names">{{item.ename}}</div>
											<div class="introduce">
												{{item.introduce}}
												<div class="details" @click="detailsClick">详情</div>
											</div>
											<div class="spans" v-for='(value,key,idx) in item' :key='idx'>
												<p v-if='Object.prototype.toString.call(value).slice(8,-1) == "Array"'><span>{{value[0]}}:</span><span class="lastname">{{value[1]}}</span></p>
											</div>
											<div class="lineBox">
												<div class="lineoneBox"><img src="../../assets/imgs/line1.png" alt=""></div>
												<div class="whiteBox"></div>
											</div>
										</div>
								</li>
							</ul>
						</div>
  </vue-scroll>
				<detailsPopUp @manage="manshow" v-if="manageshow"/>
 </div>

改后

<div class='your-container'>
		<div class="sortText">
			<div>综合排序</div>
			<div class="sortHot" @click="mostHot"><p>最热</p><div class="sortImg"><img src="../../assets/imgs/mosthot.png" alt=""></div></div>
			<div class="sortHot" @click="mostNew"><p>最新</p><div class="sortImg"><img src="../../assets/imgs/mostview.png" alt=""></div></div>
			<div class="adhibition" @click="adhibition(0)">应用</div>
			<div class="adhibition" @click="adhibition(1)">算法</div>
		</div>
		<!-- bind your configurations -->
		<vue-scroll :ops="ops">
					<div class='your-content'>
							<ul class="listBox" @handle-resize="handleResize">
								<li v-for="(item,index) in list" :key="index" class="lis">
										<div class="listIcon">
											<img src="../../assets/imgs/jicon.png" alt="">
										</div>
										<div class="listText">
											<div class="names">{{item.ename}}</div>
											<div class="introduce">
												{{item.introduce}}
												<div class="details" @click="detailsClick(item.version,item.trade,item.interfaceClassName)">详情</div>
											</div>
											<div class="spans" >
												<p><span>提供厂商:</span><span class="lastname">{{item.manufacturerName}}</span></p>
												<p v-show="item.type==0"><span>使用总次数:</span><span class="lastname">{{item.totalCount}}</span></p>
												<p v-show="item.type==0"><span>安装时间:</span><span class="lastname">{{item.createTime}}</span></p>
												<p v-show="item.type==1"><span>平均响应时间:</span><span class="lastname">{{item.avgResponseTime}}</span></p>
												<p v-show="item.type==1"><span>准确率:</span><span class="lastname">{{item.accuracyRate}}%</span></p>
												<p v-show="item.type==0"><span>占用内存:</span><span class="lastname">{{item.memory}}</span></p>
											</div>
											<div class="lineBox">
												<div class="lineoneBox"><img src="../../assets/imgs/line1.png" alt=""></div>
												<div class="whiteBox"></div>
											</div>
										</div>
								</li>
							</ul>
						</div>
  </vue-scroll>
				<detailsPopUp @manage="manshow" v-if="manageshow" :scrollDataverson="detailsverson" :scrollDatatrade="detailstrade" :scrollDatainterfaceClassName="detailsinterfaceClassName"/>
 </div>

以上这篇vue遍历对象中的数组取值示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue语法之拼接字符串的示例代码

    本文介绍了vue语法之拼接字符串的示例代码,分享给大家,具体如下. 先来一行代码: <div class="swiper-slide" v-for="item in message"> <img v-bind:src="['xxx(需要拼接的字符串)'+item.picurl]" alt="" width="100%" height="245" /> </d

  • Vue 通过公共字段,拼接两个对象数组的实例

    前端需要展示两个字段,工资项与工资值.因为后台数据原因,后端是将这两个数据分开返回,这边我需要将这两个数组拼接到一个数据. 直接上代码. 1.HTML部分 <html lang="zh"> <head> <meta charset="UTF-8"> <title>工资查询</title> <link rel="stylesheet" href="https://unpkg

  • 详解vue 数组和对象渲染问题

    最近项目有点忙碌,遇到好多问题都没有总结(╥﹏╥),在开发过程中,取vuex中的数组渲染完成之后,再次修改数组的值,数据更新了,但是视图并没有更新.以为是数组更新的问题,后来又以为是因为vuex导致的问题. 最后强制刷新组件解决了问题,但是还没有找到根本问题的所在... 数组更新检测 在 vue 中使用数组的push().pop().shift().unshift().splice().sort().reverse() .filter().concat() 方法时,改变数组的同时可以触发视图的变

  • vue实现将一个数组内的相同数据进行合并

    获取服务器传来的数组数据进行,找出其中价格相同的进行数量相加,合并该段数据: /** 先将传来的订单列表进行四舍五入,再将价格相同的订单进行合并 * @param {Object} orderList :要进行操作的订单 */ async mergeOrder(orderList) { console.log(orderList); let contrast_1 = JSON.parse(JSON.stringify(orderList)); for(let x in contrast_1){

  • vue遍历对象中的数组取值示例

    前几天小项目,没考虑周全,让后端改接口,改成数组中包含对象中包含数组的形式,后来越琢磨越不对,后台把所有数据放在了一个对象里,我拿弹窗数据不好拿,索性又改了回来,把后端折腾够呛,自己也折腾够呛,发上来,以示警戒 改前拿数据 <div class='your-container'> <div class="sortText"> <div>综合排序</div> <div class="sortHot" @click=

  • TypeScript 中如何限制对象键名的取值范围

    当我们使用 TypeScript 时,我们想利用它提供的类型系统限制代码的方方面面,对象的键值,也不例外. 譬如我们有个对象存储每个年级的人名,类型大概长这样: type Students = Record<string, string[]>; 理所当然地,数据就是长这样: const students: Students = { Freshman: ["David", "John"], sophomore: [], Junior: ["Lil

  • vue组件传递对象中实现单向绑定的示例

    当使用vue组件时,组件之间经常需要传递数据,这里不讨论传递一个字符串变量或者数字变量的情况,那些去看官方文档就够了,此处提出我在组件间传递对象时遇到的一个坑. 当组件间传递对象时,由于此对象的引用类型指向的都是一个地址,所以在子组件中修改对象的某个属性值,父组件中的对象对应的属性也会随之改变,如果有这种双向绑定的需要,那么这也算一种不错的办法,但如果不需要这种双向绑定,那就要定义一个新的对象来复制原对象的属性和值,坑就在这里,假如你普通的var.let 一个对象,例如: computed: {

  • vue给对象动态添加属性和值的实例

    一.背景 介绍:在vue中请求接口中,一个请求方法可能对应后台两个请求接口,所以请求参数就会有所不同.需要我们先设置共同的参数,然后根据条件动态添加参数属性. 二.案例 let that = this; let params = { "type":that.addQueTable.type, "discussTitle":that.addQueTable.discussTitle, }; // 区分普通题库还是模考题库 let addQuestionApi = ''

  • Javascript 遍历对象中的子对象

    复制代码 代码如下: var json_obj = { pos1:{x1:123, x2:234, y1:222, y2:333}, pos2:{x1:999, x2: 888, y1:777, y2:666} }; for (var p in json_obj) { alert(json_obj[p].x1); } 这个方法也可以扩展一下,比如遍历对象中的属性,对象中的函数等.

  • JSP 中使用cache取值出错解决办法

     JSP  中使用cache取值出错解决办法 这段时间发现系统取数据过程中,偶尔出现取数据错乱的问题,按逻辑应该取出A数据,结果取出了B数据.仔细检查了代码, 发现代码逻辑没有问题,瞬间就蒙了,是哪里出现问题了呢.仔细想了一下,以前都没出现问题,自从加了缓存之后就偶尔出现了问题,那肯定问题是缓存有问题. 仔细研究了缓存的源码,原来问题出现在DefaultKeyGenerator生成key上面.代码如下: public class DefaultKeyGenerator implements Ke

  • jstl之map,list访问遍历以及el表达式map取值的实现

    场景: request域里的数据为Map<Role, Map<String, List<Menu>>>,Role为枚举类型,为用户的Role那么访问遍历如下: <c:set var="user" value="${session_usr_key}" /> <c:forEach items="${roleMenuMap[user.role]}" var="entry">

  • C#中float的取值范围和精度分析

    本文实例分析了C#中float的取值范围和精度.分享给大家供大家参考.具体分析如下: float类型的表现形式: 默认情况下,赋值运算符右侧的实数被视为 double. 因此,应使用后缀 f 或 F 初始化浮点型变量,如以下示例中所示: float x = 3.5F; 如果在以上声明中不使用后缀,则会因为您尝试将一个 double值存储到 float 变量中而发生编译错误. float的取值范围 float占用4个字节,和int是一样,也就是32bit. 1bit(符号位) 8bits(指数位)

  • JSP  中使用cache取值出错解决办法

     JSP  中使用cache取值出错解决办法 这段时间发现系统取数据过程中,偶尔出现取数据错乱的问题,按逻辑应该取出A数据,结果取出了B数据.仔细检查了代码, 发现代码逻辑没有问题,瞬间就蒙了,是哪里出现问题了呢.仔细想了一下,以前都没出现问题,自从加了缓存之后就偶尔出现了问题,那肯定问题是缓存有问题. 仔细研究了缓存的源码,原来问题出现在DefaultKeyGenerator生成key上面.代码如下: public class DefaultKeyGenerator implements Ke

  • JS实现数组简单去重及数组根据对象中的元素去重操作示例

    本文实例讲述了JS实现数组简单去重及数组根据对象中的元素去重操作.分享给大家供大家参考,具体如下: js数组简单去重 var arr1 = [1, 2, 3, 4, 5, 6, 3, 4, 3]; function arrayUnique1(arr) { var result = [], hash = {}; for (var i = 0, elem; (elem = arr[i]) != null; i++) { if (!hash[elem]) { result.push(elem); ha

随机推荐