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

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容