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


Posted in Javascript onNovember 07, 2019

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

改前拿数据

<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遍历对象中的数组取值示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
(JS实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
jquery获取input的value问题说明
Aug 19 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
Sep 18 Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
小程序实现侧滑删除功能
Jun 25 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
Nov 07 #Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 #Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 #Javascript
vue改变循环遍历后的数据实例
Nov 07 #Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
Nov 07 #Javascript
vue v-for直接循环数字实例
Nov 07 #Javascript
jsonp格式前端发送和后台接受写法的代码详解
Nov 07 #Javascript
You might like
PHP static局部静态变量和全局静态变量总结
2014/03/02 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
php实现的验证码文件类实例
2015/06/18 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
Python3匿名函数用法示例
2018/07/25 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
Python 加密与解密小结
2018/12/06 Python
Python 支付整合开发包的实现
2019/01/23 Python
Python Django基础二之URL路由系统
2019/07/18 Python
python如何把字符串类型list转换成list
2020/02/18 Python
python程序文件扩展名知识点详解
2020/02/27 Python
基于python代码批量处理图片resize
2020/06/04 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
荷兰手表网站:Watch2Day
2018/07/02 全球购物
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
运动会演讲稿200字
2014/08/25 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL
利用python进行数据加载
2021/06/20 Python
方法汇总:Python 安装第三方库常用
2022/04/26 Python
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android