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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 Javascript
中止javascript执行的方法
Feb 14 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
javascript手风琴下拉菜单实现代码
Nov 12 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
手写Node静态资源服务器的实现方法
Mar 20 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 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中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
利用JS实现数字增长
2016/07/28 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
浅谈vue-router2路由参数注意的问题
2017/11/08 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
Vue高版本中一些新特性的使用详解
2018/09/25 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
[59:35]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第一场 1月8日
2021/03/11 DOTA
使用django-crontab实现定时任务的示例
2018/02/26 Python
python中的字符串内部换行方法
2018/07/19 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
python实现人机猜拳小游戏
2020/02/03 Python
python生成并处理uuid的实现方式
2020/03/03 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
公司晚会主持词
2014/03/22 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
商务考察邀请函模板
2015/02/02 职场文书
开学第一周总结
2015/07/16 职场文书